Вредоносное ПО (malware) - это назойливые или опасные программы,...
Как изменить шрифт?
При создании сайта постоянно возникает необходимость изменения шрифта текста для самых разных частей и элементов HTML-страниц, ведь это не только добавляет сайту уникальность и стиль, но и повышает качество восприятия информации. В HTML для этого существуют специальные теги, о них мы и поговорим в данном уроке, который будет одним из самых больших в этом учебнике. Но, как я вам уже говорил ранее, не старайтесь все запоминать наизусть, не надо, главное - разобраться и понять о чем идет речь на каждом этапе урока.
Изменение стилей шрифтов
Изменять стили написания шрифтов в HTML можно далеко не одним способом и вы скоро в этом убедитесь. А теперь давайте рассмотрим несколько новых тегов:
... и ... - выделяют текст полужирным шрифтом.
... и ... - выделяют текст курсивом .
... - выводит текст в верхнем индексе, например E = mc 2 .
... - выводит текст в нижнем индексе, например H 2 SO 4 .
Все эти теги являются встроенными (inline, уровня строки) , то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше - должен быть закрыт позже.
Думаю, вы заметили, что для выделения жирным и курсивом существует по два тега. Дело в том, что обычные браузеры отображают содержимое этих тегов одинаково, а вот невизуальные (голосовые) браузеры могут по особенному акцентировать текст внутри и . Поэтому, если вы хотите выделить какие-то слова или фразы, чтобы привлечь читателя, то лучше использовать именно эти теги, хотя, по большому счету, разницы нет.
Вы спросите: «Но неужели указанные выше теги - это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги
и
, подчеркивающие
текст, а также тег
, отображающий зачеркнутый
текст. Но, видите ли, эти теги являются устаревшими в HTML и их, как и атрибут align
, возможно скоро перестанут понимать браузеры. Поэтому я вам покажу другой способ, который вы можете использовать без опаски. А заключается он в применении атрибута style
, причем его допустимо указывать внутри любых тегов
. Общий синтаксис следующий:
<тег style= "text-decoration:underline" >... - подчеркивает текст.
<тег style= "text-decoration:overline" >... - надчеркивает текст.
<тег style= "text-decoration:line-through" >... - зачеркивает текст.
Пример изменения стилей шрифтов
Жирный шрифт. Курсив.
Жирный курсив.
H2 SO4 - формула серной кислоты написанная курсивом.
Подчеркнутый параграф текста.
Обычный текст, зачеркнутый жирный.
Результат в браузере
Теперь хотелось бы сделать одно пояснение по поводу атрибута style . Style - это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. Поэтому, чтобы не забивать вам голову ненужной информацией, в данном учебнике я тоже заменил их стилями, то есть атрибутом style . Его общий синтаксис следующий:
<тег style="свойство CSS:значение" >...
Используя style вы совершенно ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.
Тег или что делать, когда нет нужных тегов
Ну что, пока все понятно? Хорошо, тогда вопрос. А что вы будете делать, если вам, например, надо зачеркнуть не весь параграф, а только половину текста, причем не делать его ни жирным, ни курсивом? Ну да не переживайте, тут вам поможет один очень удобный и нужный тег.
Итак, знакомьтесь - ... . Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе , без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style . Именно благодаря этому атрибуту, а вернее его разным значениям, у появляются те или иные свойства. Вот так, а теперь изучаем пример.
Пример использования тега SPAN
Обычный текст без изменений.
Еще обычный текст. Подчеркнутый. Зачеркнутый.
Результат в браузере
Обычный текст без изменений.
Еще обычный текст. Подчеркнутый. Зачеркнутый.
Меняем имя (гарнитуру) шрифта
Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:
Это и есть имена шрифтов, которые имеются на вашем компьютере и их используют не только Word или Writer, но и многие другие приложения, в том числе и браузеры. Имя (гарнитура) шрифта определяет сам его рисунок отличающий один шрифт от другого.
Я вам настоятельно не рекомендую применять какие-либо экзотические шрифты, так как их может не быть на компьютере человека, который зайдет к вам на сайт и тогда вместо букв он увидит разные непонятные символы или квадратики. Вот список самых распространенных шрифтов, которые практически наверняка есть на компьютере каждого пользователя:
По умолчанию практически все браузеры используют шрифт "Times New Roman", а чтобы его изменить используется все тот же атрибут style , который можно применить внутри любого тега . Общий синтаксис указания следующий:
<тег style="font-family:имя шрифта, семейство" >...
Если имя шрифта состоит из нескольких слов, то его необходимо закрывать в одинарные кавычки. Допускается указывать не одно, а несколько имен шрифтов через запятую и тогда, если первого шрифта на компьютере нет - будет использован второй, третий и т.д. Но в конце обязательно поставьте имя всего семейства шрифтов, в этом случае, если браузер не обнаружит ни одного шрифта, то применит шрифт максимально подходящий к этому семейству.
Чтобы изменить шрифт на всей странице - достаточно указать атрибут style в теге
. А если необходимо изменить шрифт для отдельной части текста, то заключите его в тег и примените атрибут к нему.Пример изменения имени шрифтов
Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.
Это Comic Sans MS или любой cursive.
Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.
Результат в браузере
Ну что, разобрались в примере? Сделаю одно пояснение, понимание которого вам серьезно облегчит жизнь в будущем, хотя думаю многие уже догадались. Итак, если теги вложены друг в друга и несколько из них осуществляют изменения одного типа (например, меняют имя шрифта), то теги-потомки переопределяют свойства тегов-предков. Если же вложенные теги осуществляют разные изменения, то они дополняют друг друга, вот и все.
Меняем размер шрифта
Язык HTML ограничен всего семью размерами шрифтов, что, согласитесь, очень мало для хорошего сайта. Поэтому для изменения размеров все давно используют CSS, и сейчас вы тоже этому научитесь.
В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных - это пункты (pt), пиксели (px) и проценты (%). Итак:
- pt - Пункты. Один пункт равен 1/72 дюйма, а один дюйм - 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
- px - Пиксели. Измеряется в пикселях монитора компьютера. Пиксель - это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
- % - Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.
Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега . Общий синтаксис такой:
<тег style="font-size:размер" >...
Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице - достаточно указать атрибут style в теге
. А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег и примените атрибут к нему.Пример изменения размера шрифтов
Этот размер шрифта составляет 90% от размера в браузере по умолчанию.
Этот размер составляет 90% уже от размера в теге BODY.
Размер шрифта заголовка составляет 120% от размера в BODY.
Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.
Результат в браузере
Этот размер шрифта составляет 90% от размера в браузере по умолчанию.
Этот размер составляет 90% уже от размера в BODY.
Размер шрифта заголовка составляет 120% от размера в BODY.
Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.
Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) - разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.
Еще немного об атрибуте style
Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:
Текст параграфа.
Текст параграфа.
Или вообще вот так.
Текст параграфа.
Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style - не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:
Текст параграфа.
Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (" "), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?
Так, этот урок вышел очень насыщенным, поэтому сделайте домашнее задание и немного отдохните.
Домашнее задание.
- Создайте заголовок статьи и двух ее разделов, но заголовки разделов еще и подчеркните.
- Сделайте так, чтобы при наведении курсора мыши на заголовок статьи появлялась соответствующая надпись.
- Напишите один параграф в начале статьи и по два в каждом разделе.
- Установите для всей страницы шрифт Arial с размером 90% от размера в браузере по умолчанию.
- Установите для всех заголовков шрифт Times и пусть заголовок статьи будет с размером шрифта в 150%, а подзаголовки - 120%.
- Выделите в первом параграфе два слова жирным шрифтом и одно курсивом. Во втором - фразу из нескольких слов жирным курсивом. В третьем - подчеркните фразу выделенную курсивом. В четвертом - зачеркните половину фразы выделенной жирным.
- Напишите в последнем параграфе формулу спирта: C 2 H 5 OH.
В html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство.
Теги и атрибуты при роботе со шрифтами html
Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .
Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.
Рассмотрим теги, которые используются для работы со шрифтами в html и их атрибуты. Основным из них является тег . С помощью значений его атрибутов можно задать несколько характеристик шрифта:
- color – устанавливает цвет текста;
- size – размер шрифта в условных единицах.
Поддерживается положительное значение атрибута от 1 до 7.
- face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега . Поддерживается сразу несколько значений перечисленных через запятую.
Форматируется только тот текст, который расположен между частями парного тега font. Остальной текст отображается стандартным шрифтом, установленным по умолчанию.
Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:
- — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
- — размер больше установленного по умолчанию;
- — меньший размер шрифта;
- — наклонный текст (курсив ). Аналогичный ему тег ;
- — текст с подчеркиванием;
— зачеркнутый;- — отображение текста только в нижнем регистре;
- — в верхнем регистре.
Обычный текст
Жирный текст
Жирный текст
Больше обычного
Меньше обычного
Курсив
Курсив
С подчеркиванием
Зачеркнутый
Возможности атрибута style
Кроме описанных тегов существует еще несколько способов, как изменить шрифт в html . Одним из них является применение универсального атрибута style . С помощью значений его свойств можно задавать стиль отображения шрифтов:
1) font-family
– свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя
.
Синтаксис написания:
font-family: имя шрифта [, имя шрифта[, ...]]
2) font-size
– задается размер от 1 до 7. Это один из основных способов того, как в html
можно увеличить шрифт.
Синтаксис написания:
font-size: абсолютный размер | относительный размер | значение | проценты | inherit
Размер шрифта можно также задать:
- В пикселях;
- В абсолютном значении (xx-small, x-small, small, medium, large );
- В процентах;
- В пунктах (pt ).
Font-size:7
Font-size:24px
Font-size: x-large
Font-size: 200%
Font-size:24pt
3) font-style – устанавливает стиль написания шрифта. Синтаксис:
font-style: normal | italic | oblique | inherit
Значения:
- normal –нормальное написание;
- italic – курсив;
- oblique – шрифт с наклоном вправо;
- inherit – наследует написание родительского элемента.
Пример того, как поменять шрифт в html с помощью этого свойства:
font-style:inherit
font-style:italic
font-style:normal
font-style:oblique
4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:
font-variant: normal | small-caps | inherit
Пример того, как изменить шрифт в html этим свойством:
font-variant:inherit
font-variant:normal
font-variant:small-caps
5) font-weight – позволяет установить толщину написание текста (насыщенность ). Синтаксис:
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Значения:
- bold – устанавливает полужирный шрифт html;
- bolder – жирнее относительно normal;
- lighter –менее насыщенное относительно normal;
- normal – нормальное написание;
- 100-900 – задается толщина шрифта в числовом эквиваленте.
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
font-weight:900
font-weight:100
Свойство font и цвет шрифта html
Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :
font: font-size font-family | inherit
Также в качестве значения могут быть заданы шрифты, используемые системой в надписях на различных элементах управления:
- caption – для кнопок;
- icon – для иконок;
- menu – меню;
- message-box –для диалоговых окон;
- small-caption – для небольших элементов управления;
- status-bar – шрифт строки состояния.
font:icon
font:caption
font:menu
font:message-box
small-caption
font:status-bar
font:italic 50px bold "Times New Roman", Times, serif
Возможность управлять шрифтом - меняете ли вы его семейство, кегель или толщину - позволяет увеличить блеск и неповторимость WEB-страниц.
font-family
Определяет семейства шрифта, используемого в этом тексте. Может быть несколько таких семейств, отделенные друг от друга запятыми. Приоритет определяется порядком в этом списке.
Значение:
- имя семейства - семейства шрифта, применяемое для вывода текста. Имена, состоящие из нескольких слов, должны заключаться в кавычки.
- имя типового шрифта, применяемого для вывода текста. Типовыми могут быть следующие шрифты: serif, sans-serif, fantasy и monospce.
font-style
Определяет начертания шрифта, такие как курсив или наклонное.
Значение:
- italic - курсив.
- oblique - наклонное начертание. Это начертание исключительно экранного шрифта. Он имеет несколько меньший наклон чем курсив.
- inherit - применяется значение родительского элемента.
font-variant
Определяет, будет ли шрифт выведен в виде малых прописных букв.
Значение:
- normal - обычное начертание (по умолчанию).
- small-caps - выводит шрифт в виде малых прописных букв.
- inherit - применяется значение родительского элемента.
font-weight
cвойства шрифта font css
Определяет толщину выводимого шрифта.
Значение:
- normal - обычное начертание (по умолчанию).
- bold - полужирное начертание. Полужирное начертание выделяет текст. Линии становятся толще, а сам текст немного шире, чем при обычном начертании.
- bolder - жирный шрифт.
- lighter - светлый шрифт. Тонкие, светлые начертания шрифтов производят менее сильное впечатление, чем обычные или полужирные, но они незаменимы, когда требуется легкий и простой внешний вид.
- 100-900 - число, указывающее толщину шрифта. 100 соответствует самой светлой толщине (lighter), 400-normal, 700- bold, 900- bolder.
- inherit - применяется значение родительского элемента.
font-stretch
Определяет толщину шрифта.
Значение:
- normal - обычная ширина (по умолчанию)
- wider- увеличение текущей ширины.
- narrower - уменьшает текущую ширину на единицу.
- ultra-condensed - наименьшее значение ширины.
- extra-condensed - значение большее, чем предыдущее
- condensed - значение большее, чем предыдущее.
- semi-condensed - значение большее, чем предыдущее.
- semi-expanded - значение большее, чем при обычной толщине.
- expanded - значение большее, чем предыдущее.
- extra-expanded - значение большее, чем предыдущее.
- ultra-expanded - максимальное значение ширины.
- inherit - применяется значение родительского элемента.
font-size
Определяет кегель (высоту символов) шрифта.
Значение:
- абсолютный размер - для выражения кегля шрифта используется ключевые слова: xx-small(крайне малый), small (малый), medium (средний) (по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое).
- относительный размер - для выражение кегля шрифта используется ключевые слова: larger (меньше), smaller (больше),
- любое соответствующая стандарту высота - абсолютный размер шрифта. Отрицательное значение не допускается.
- любое соответствующее стандарту процентное значение.
- inherit - применяется значение родительского элемента.
cвойства шрифта font css
font-size-adjust
Определяет соотношение ширины и высоты символов, которые поддерживается при установке кегля шрифта. Это дает пользователю регулировать изменения высоты текста.
Значение:
- none - по умолчанию.
- любое соответствующее стандартам значение - число, представляющее соотношение высоты и ширины символов.
- inherit - применяется значение родительского элемента.
font
Удобное свойство для установки сразу всех параметров шрифта. Если какие-то значение пропущены, то берется их значение по умолчанию.
Значение:
- font-style - начертание.
- font-variant - значение, определяющее вывод шрифта в виде малых прописных букв.
- font-weight- толщина.
- font-size - кегль.
- line-height - интерлиньяж.
- font-family - семейство шрифтов.
- inherit - применяется значение родительского элемента.
cвойства шрифта font css
Внедрения индивидуальных шрифтов.
До появления Internet Explorer 4.0 Web-мастер должен были использовать встроенные шрифты в браузер или использовать шрифты, доступные в системе. CSS представляет WEB-мастеру возможность указания отображаемых шрифтов, которые загружаются вмести с Web-страницей, что гарантирует правильную обработку страницы. Загружаемый шрифт определяется с помощью новых элементов в синтаксис CSS. Ниже приведен синтаксис для определения загружаемого шрифта в CSS:
@font-face {font-family: fontName ; src: url(failMame.eot) }
значение fontName, на которое впоследствии ссылается свойство CSS font-family, определяется пользователем. Ниже приведен полный пример:
Текст отображается с использованием загружаемого шрифта
после определения нового шрифта его имя может быть использовано как действительное для свойства font-family. Свойство font-family может быть связано с равным списком шрифтов, так что если первый в списке шрифтне может быть загружен, то браузер попытается загрузить следующий шрифт или семейство шрифтов. В данном примере последним определенным шрифтом является sans-serif, что позволяет браузеру использовать любой шрифт семейства sans-serif для воспроизведения элемента.
От автора: приветствую вас на webformyself. Информация – это то, ради чего мы все используем интернет. Хорошо подобранный шрифт позволяет лучше воспринимать текстовую информацию, что увеличивает лояльность людей к какому-то ресурсу. Давайте сегодня разбираться, как изменить шрифт на сайте.
Как менять параметры
Стоит отметить сразу же, что под изменением текста можно понимать просто изменение его параметров, либо же изменение самого имени шрифта, после чего буквы и символы будут выглядеть абсолютно по-другому. В первом же случае он просто приобретет другой цвет, станет более жирным или курсивным.
Такие параметры меняются с помощью css-свойств для работы с текстом. Подробно о них вы можете узнать из нашего учебника по css для новичков.
Как менять шрифты
А мы переходим к нашему главному на сегодня вопросу. Для таких изменений вам потребуется опять же знания css хотя бы на базовом уровне. Чтобы изменить шрифт, необходимо написать для нужного нам элемента свойство:
JavaScript. Быстрый старт
font-family: название;
font - family : название; |
Например, если менять вы хотите для всего сайта, то нужно искать в таблице стилей (обычно style.css) селектор body. Обычно у него задано несколько шрифтов. Тот, что стоит самым первым после двоеточия и будет использоваться в первую очередь. Если по каким-то причинам его не получилось загрузить, браузер выберет второй и так до тех пор, пока не будет найден шрифт, который доступен для использования в данный момент.
Вы должны знать, что существуют так называемые стандартные шрифты, которые есть на любой OC и их можно использовать без всяких страхов. Например, это Arial, Times New Roman, Tahoma и т.д. Для еще большей надежности после указания конкретного названия через запятую можно указать семейство шрифтов. В этом случае, если выбранное начертание не доступно, браузер выберет первый оптимальный из семейства.
font-family: Arial, "Times New Roman", sans-serif;
font - family : Arial , "Times New Roman" , sans - serif ; |
В этом примере сначала будет подставлен шрифт Arial. Если он найден, то именно он будет использоваться. Если нет, то браузер будет искать Times New Roman. Кстати, обратите внимание на то, что если название шрифта состоит из нескольких слов. Его нужно заключать в двойные кавычки.
Через запятую мы указали семейство шрифтов “без засечек”. На всякий случай. Также существуют такие: serif (с засечками), cursive (курсивные), monospace (моноширинные), fantasy (декоративные). Каждое семейство для своих целей. Например, основной шрифт для чтения информации лучше выбирать без засечек.
Для цитат вы можете использовать курсивный текст, для вывода машинного кода – моноширинный. Наконец, различные заголовки любят оформлять с помощью декоративных шрифтов.
Как загрузить новый шрифт на сайт?
Да, такая возможность у вас есть. Для этого советую сразу создать в вашей теме папку fonts, в будущем вы будете складывать туда все шрифты, которые будете подключать. Вообще я не рекомендую подключать слишком много.
Собственно, способов добавить новые шрифты на сайт я вижу два:
Использовать сервис Google Fonts. Тут вы можете выбрать понравившийся шрифт и очень быстро подключать его к сайту. В таком случае никаких дополнительных папок вам подключать не нужно – все будет грузиться из хранилища сервиса, но при этом немного будет уменьшаться скорость загрузки. Поэтому я и не советую вам подключать слишком много. Максимум – 3-4 шрифта.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
На скриншоте вы можете видеть, какую кнопку нужно нажать для быстро использования шрифта. Также, если он вам понравился, можно добавить к себе в коллекцию, чтобы не потерять.
По нажатию на быстрое использование сервис предложит вам несколько вариантов подключение и код, который нужно скопировать для того, чтобы шрифт был подключен. Я советую подключать стандартным способом через тег link.
После этого вы можете использовать шрифт через font-face, сервис подскажет вам, как правильно писать его название.
Способ второй: Закачать на сайт и подключить через @font-face. В css есть специальный синтаксис, который позволяет подключить новые шрифты. Для этого их сначала нужно закачать в какую-нибудь директорию на вашем сайте. Я советую создать новую – fonts. Также такая директория уже может быть у вас, тогда просто скидываем в нее папку с файлами. Где ее взять? Ну конечно, качаем все нужные шрифты в интернете, где же еще.
Хотел бы отметить, что для кроссбраузерного отображения, файл должен быть как минимум в нескольких форматах. А именно, ttf, woff, eot. На скриншоте вы можете увидеть типичный пример подключения:
Самое главное, указать имя, а также путь ко всем доступным форматам с помощью свойства src через запятую.
Теперь везде, где нужно поставить этот шрифт, просто копируем строчку с font-family и ставим. Разумно будет дописать пару более простых шрифтов через запятую.
Размер и другие параметры
Ну а как изменить размер шрифта на сайте? За это отвечает свойство font-size и ему можно указывать значения в пикселах, относительных единицах em, процентах и других единицах. Хорошим тоном веб-разработки считается задание размеров в относительных единицах, что текст смотрелся максимально читабельно при различных настройках размера шрифта.
Для задания параметров шрифтов в CSS используется свойство font .
Font-family
Это свойство css задает гарнитуру шрифта. Все шрифты можно условно разделить на несколько групп:
- Serif - шрифты с засечками, например, Times New Roman.
- Sans-serif - шрифты рубленные, без засечек, например, Arial.
- Monospace - моноширинные шрифты, например, Courier New.
- Cursive - курсивные шрифты, например, Calisto MT.
- Fantasy - декоративные шрифты, например, Torhok.
Так вот в качестве значения свойства font-family можно указать шрифт и группу шрифтов. Например:
body{ font-family: Verdana, sans-serif; }
Теперь весь текст страницы будет написан шрифтом Verdana, но если на компьютере пользователя такого шрифта не окажется, то будет использоваться любой другой из группы sans-serif . То есть будет подобран шрифт наиболее близкий ему по виду, и внешний вид страницы будет не очень отличаться от задуманного.
Вообще, можно указать несколько шрифтов через запятую, в порядке убывания приоритета.
Font-style
Это свойство css задает стиль шрифта: normal (обычный), oblique (наклонный), italic (курсивный). Пусть у нас есть html-страница с тремя параграфами, зададим каждому уникальный идентификатор:
Текст в параграфе с идентификатором sn.
Текст в параграфе с идентификатором so.
Текст в параграфе с идентификатором si.
Зададим в таблице стилей шрифт для всех параграфов:
p#sn, p#so, p#si{ font-family: Verdana, sans-serif; }
Сейчас наша страница в браузере выглядет так:
Теперь давайте зададим каждому параграфу свой стиль:
p#sn, p#so, p#si{ font-family: Verdana, sans-serif; } p#sn{ font-style:normal; } p#so{ font-style:oblique; } p#si{ font-style:italic; }
Вы спросите, чем отличается наклонный стиль от курсивного? Дело в том, что различные шрифты включают в себя различные варианты начертания (bold, italic, regular и другие). Но, если в какой-либо шрифт не включен вариант italic, то он имитируется простым наклоном букв, что и соответствует значению oblique.
По умолчанию используется стиль normal.
Font-variant
Это свойство css задает вариант написания букв из двух возможных: normal (обычный) и small-caps (малые прописные буквы). По умолчанию это свойство имеет значение normal. Давайте изменим таблицу стилей предыдущего примера на такую:
p#sn, p#so, p#si{ font-family: Verdana, sans-serif; } p#so{ font-variant:small-caps; }
Теперь наша страница выглядет так:
Font-weight
Это свойство css задает толщину букв шрифта. В качестве значений выступают числа: 100, 200, 300, 400, 500, 600, 700, 800 и 900. А также ключевые слова: normal (нормальный), bold (полужирный), bolder (более жирный по отношению к базовому, унаследованному от предка) и lighter (менее жирный по отношению к базовому, унаследованному от предка).
При этом значению normal соответствует числовое значение 400, а значению bold - 700. Давайте зададим это свойство нашему второму параграфу:
p#sn, p#so, p#si{ font-family: Verdana, sans-serif; } p#so{ font-weight:bold; }
Теперь наша страница выглядет так:
Font-size
Это свойство задает размер шрифта. Задавать размер в css можно тремя способами:
- с помощью ключевых слов (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, large),
- с помощью относительных единиц (% и em),
- с помощью единиц измерения длины (пикселы, пункты, сантиметры и миллиметры).
С помощью относительных единиц задаются размеры относительно элемента-предка.
Задавать размер с помощью единиц измерения кажется наиболее удачным, по крайней мере, на сегодняшний день. Здесь следует сказать несколько слов о единицах измерения.
Существует три относительных единицы измерения:
- px - равен одной точке на экране, называемой пикселом.
- em - равен высоте шрифта, используемого в данном элементе.
- ex - равен высоте строчной буквы "х" шрифта, используемого в данном элементе.
- in - равен 1 дюйму (2,54 см).
- pt - равен 1/72 дюйма.
- pc - равен 1/6 дюйма.
- mm - равен 1 миллиметру.
- sm - равен 1 сантиметру.
У наших пользователей разные диагонали мониторов и разные разрешения экранов, и мы не знаем какие они. И то, что будет смотреться хорошо на одном экране, будет совершенно нечитабельным на другом.
Поэтому для web-страниц лучше использовать только три единицы измерения: pt - для "фиксированного" дизайна сайта, % - для "резинового" дизайна и em - для пропорционального изменения размера.
Давайте зададим для наших параграфов размер в 12 пикселов, для второго параграфа увеличим его на 20%, а для третьего - уменьшим на 10% от базового (т.е. от 12 пикселов):
p#sn, p#so, p#si{ font-family: Verdana, sans-serif; font-size:12px; } p#so{ font-size:1.2em; } p#si{ font-size:0.8em; }
Обратите внимание, у величины em в качестве разделителя выступает точка (.), а не запятая. Теперь наша страница выглядит так:
Сокращенная запись свойства font
В этом случае значения всех свойств перечисляются через пробел в следующем порядке: font-style, font-variant, font-weight, font-size, font-family. Причем, любое из свойств, кроме font-size и font-family, можно не указывать. Давайте зададим нашим параграфам следующие свойства:
p#sn, p#so, p#si{ font:italic 12px Verdana, sans-serif; } p#so{ font-size:1.2em; } p#si{ font-style:normal; }
Таким образом, сначала сокращенной записью мы задали значения свойства font для всех параграфов, а затем задали отличия для второго и третьего параграфов. Теперь наша страница выглядит так:
Вот мы и рассмотрели все свойства шрифтов. Помните, что их можно применять ко всем элементам. Наш урок подошел к концу. В следующий раз будем изучать возможности управления текстом в CSS. А пока потренируйтесь, задавая свойства background, color и font, различным элементам.
