Содержание

CSS: Изменение шрифта

Некоторые сайты привлекают пользователей не анимацией, не картинками или фотографиями, не видео-роликами, а исключительно своим текстовым содержимым. Текст — это неотъемлемое содержимое многих популярных сайтов. В предыдущих уроках мы рассмотрели CSS свойства, которые позволяют изменить цвет текста, добавить к нему тень, выровнять его и добавить к нему подчеркивание, надчеркивание или вовсе его зачеркнуть. В этом уроке будет рассмотрено какие семейства шрифтов бывают и как изменить шрифт текста, установленный по умолчанию.

Разница между семействами шрифтов Sans-serif и Serif

PuzzleWeb.ru — шрифт sans-serif

PuzzleWeb.ru — шрифт serif

Семейства шрифтов в CSS

В CSS шрифты разделены на семейства, каждое семейство состоит из набора шрифтов, обладающих общими характеристиками. Существует всего пять семейств шрифтов:

  • sans-serif — шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
  • serif — семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки — декоративные штрихи и черточки по краям букв.
  • monospace — семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
  • cursive — шрифты, имитирующие рукописный текст.
  • fantasy — художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.

Свойство font-family дает возможность изменить шрифт, заданный по умолчанию. Обычно оно содержит список взаимозаменяемых шрифтов, разделенных запятыми, принадлежащих одному семейству. Если имя шрифта состоит более чем из одного слова, то его нужно указывать в кавычках. В конце списка обычно указывается название семейства:


body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

Рассмотрим, как браузер обрабатывает список шрифтов, заданный в нашем свойстве font-family:

  1. Сначала он проверяет, установлен ли шрифт Verdana на компьютере, и, если да, использует его в качестве шрифта для текста внутри элемента (в нашем случае внутри элемента <body>)
  2. Если Verdana не установлен, то ищет шрифт Helvetica.
    В случае успешного поиска использует его внутри <body>.
  3. Если и Helvetica не установлен, то ищет шрифт Arial. Если он имеется на компьютере, то применяет его внутри <body>.
  4. И наконец, если ни один из указанных шрифтов не найден, применяется первый, найденный браузером на компьютере шрифт из семейства sans-serif. Таким образом браузер сможет самостоятельно определить подходящий шрифт из семейства.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.exserif { font-family: "Times New Roman", Times, serif; }
      p.exsansserif { font-family: Arial, Helvetica, sans-serif; }
    </style>
  </head>

  <body>
    <h2>CSS свойство font-family</h2>
    <p>Абзац использующий шрифт Times New Roman.</p>
    <p>Абзац использующий шрифт Arial.
 
 </p>
  </body>
</html>

Попробовать »

Примечание: при выборе только одного определенного шрифта важно понимать то, что браузер отобразит его только в том случае, если данный шрифт установлен на компьютере пользователя. Если шрифт не будет найден, то текст будет отображен шрифтом «Times New Roman», который задан по умолчанию во всех браузерах.

С этой темой смотрят:

  • Отступ текста в CSS
  • Выравнивание текста в CSS
  • Цвет и тень текста в CSS
  • CSS стиль и размер шрифта
  • Стандартные (безопасные) шрифты

font | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюЗависит от использования
НаследуетсяДа
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www. w3.org/TR/CSS21/fonts.html#propdef-font

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

Синтаксис

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit

Значения

В качестве обязательных значений свойства font указывается размер шрифта и его семейство. Остальные значения являются опциональными и задаются при желании. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно.

inherit
Наследует значение родителя.

Допускается в качестве значения использовать ключевые слова, определяющие шрифт различных элементов операционной системы пользователя.

caption
Шрифт для текста элементов форм вроде кнопок.
icon
Шрифт для текста под иконками.
menu
Шрифт применяемый в меню.
message-box
Шрифт для диалоговых окон.
small-caption
Шрифт для подписей к небольшим элементам управления.
status-bar
Шрифт для строки состояния окон.

Примеры использования

p { font: 12pt/10pt sans-serif; }

Из типографики пошла запись указывать через слэш размер шрифта и межстрочное расстояние (интерлиньяж). Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — интерлиньяж. В качестве семейства указывается рубленый шрифт (sans-serif).

p { font: bold italic 110% serif; }

Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задается в процентах, а в качестве гарнитуры используется шрифт с засечками (serif).

p { font: normal small-caps 12px/14px fantasy; }

Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-weight.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font</title>
  <style>
   .layer1 {
    font: 12pt sans-serif;  
   } 
   h2 {
    font: 200% serif;
   }
  </style>
 </head>
 <body> 
  <div>
  <h2>Duis te feugifacilisi</h2>
  Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
  illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
  dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
  feugat nulla facilisi.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font

Объектная модель

[window.]document.getElementById(«elementID»).style.font

Браузеры

Internet Explorer до версии 7. 0 включительно не поддерживает значение inherit.

Шрифт

CSS по теме

Статьи по теме

  • Главная страница

Рецепты CSS

Шрифты CSS

❮ Назад Далее ❯

Выбор правильного шрифта для вашего сайта очень важен!

Выбор шрифта важен

Выбор правильного шрифта оказывает огромное влияние на восприятие читателями Веб-сайт.

Правильный шрифт может создать сильную индивидуальность для вашего бренда.

Очень важно использовать легко читаемый шрифт. Шрифт добавляет значение для вашего текста. Также важно правильно подобрать цвет и размер текста. для шрифта.

Общие семейства шрифтов

В CSS существует пять общих семейств шрифтов:

  1. Шрифты Serif имеют небольшую обводку по краям каждой буквы. Они создают ощущение формальности и элегантности.
  2. Шрифты без засечек имеют четкие линии (без мелких штрихов). Они создают современный и минималистичный вид.
  3. Monospace шрифты — здесь все буквы имеют одинаковую фиксированную ширину. Они создают механический вид.
  4. Курсивные шрифты имитируют человеческий почерк.
  5. Шрифты Fantasy — это декоративные/игровые шрифты.

Все различные имена шрифтов принадлежат к одному из общих семейств шрифтов.

Разница между шрифтами с засечками и шрифтами без засечек

Примечание: На экранах компьютеров шрифты без засечек считаются более легкими для чтения, чем шрифты с засечками.

Некоторые примеры шрифтов

Общее семейство шрифтов Примеры названий шрифтов
С засечками Times New Roman
Грузия
Гарамонд
Без засечек Arial
Verdana
Helvetica
Моноширинный Courier Новый
Консоль Lucida
Монако
Курсив Кисть MT
Lucida Handwriting
Фэнтези Медная пластина
Папирус

Свойство CSS font-family

В CSS мы используем свойство font-family для указания шрифта текста.

Примечание . Если имя шрифта состоит из более чем одного слова, оно должно быть в кавычках, например: «Times New Roman».

Совет: Свойство font-family должно содержать несколько имен шрифтов в качестве «запасной» системы, для обеспечения максимальной совместимости между браузерами/операционными системами. Начните с нужного шрифта и закончите общим семейством (чтобы позволить Браузер выбирает аналогичный шрифт из общего семейства, если нет других шрифтов. доступный). Названия шрифтов должны быть разделены запятой. Подробнее о запасные шрифты в следующей главе.

Пример

Укажите разные шрифты для трех абзацев:

.p1 {
  семейство шрифтов: «Times New Roman», Times, с засечками;
}

.p2 {
  семейство шрифтов: Arial, Helvetica, без засечек;
}

.p3 {
  семейство шрифтов: «Lucida Console», «Courier New», моноширинный;

}

Попробуйте сами »

❮ Предыдущая Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

2 Top 9 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
| О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

Безопасные веб-шрифты CSS

❮ Назад Далее ❯

Что такое веб-безопасные шрифты?

Безопасные веб-шрифты — это шрифты, которые устанавливаются во всех браузерах и на всех устройствах.

Резервные шрифты

Однако не существует на 100% полностью безопасных веб-шрифтов. Всегда есть вероятность того, что шрифт не найден или установлен неправильно.

Поэтому очень важно всегда использовать резервные шрифты.

Это означает, что вы должны добавить список похожих «резервных шрифтов» в семейство шрифтов свойство. Если первый шрифт не работает, браузер будет пробовать следующий, следующий и так далее. Всегда заканчивайте список общим названием семейства шрифтов.

Пример

Здесь есть три типа шрифта: Tahoma, Verdana и без засечек. Второй и третий шрифты являются резервными на случай, если первый не будет найден.

p {
семейство шрифтов: Tahoma, Verdana, без засечек;
}

Попробуйте сами »

Лучшие веб-безопасные шрифты для HTML и CSS

В следующем списке представлены лучшие веб-безопасные шрифты для HTML и CSS:

  • Arial (без засечек)
  • Verdana (без засечек)
  • Тахома (без засечек)
  • Требушет MS (без засечек)
  • Times New Roman (с засечками)
  • Грузия (с засечками)
  • Гарамонд (с засечками)
  • Курьер Новый (монопространство)
  • Кисть Script MT (курсив)

Примечание: Прежде чем опубликовать свой веб-сайт, всегда проверяйте, насколько шрифты появляются в разных браузерах и устройствах и всегда используют запасные шрифты!

Arial (без засечек)

Arial является наиболее широко используемым шрифтом как для онлайн, так и для печатных СМИ. Ариал также является шрифтом по умолчанию в Документах Google.

Arial — один из самых безопасных веб-шрифтов, он доступен во всех основных операционных системах.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Verdana (без засечек)

Verdana — очень популярный шрифт. Verdana легко читается даже при небольшом размере шрифта.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Tahoma (без засечек)

В шрифте Tahoma меньше пробелов между символами.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Trebuchet MS (без засечек)

Trebuchet MS был разработан Microsoft в 1996 году. Используйте этот шрифт с осторожностью. Нет поддерживается всеми мобильными операционными системами.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Times New Roman (с засечками)

Times New Roman — один из самых узнаваемых шрифтов в мире. Это выглядит профессиональный и используется во многих газетах и ​​«новостных» веб-сайтах. Это также основной шрифт для устройств и приложений Windows.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Georgia (с засечками)

Georgia — элегантный шрифт с засечками. Он хорошо читается при разных размерах шрифта, поэтому он является хорошим кандидатом на дизайн, адаптированный для мобильных устройств.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Garamond (с засечками)

Garamond — классический шрифт, используемый во многих печатных книгах. Он имеет вечный внешний вид и хорошая читабельность.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Courier New (моноширинный)

Courier New — наиболее широко используемый моноширинный шрифт с засечками. Courier New часто используется с дисплеями для кодирования и многими поставщиками электронной почты. использовать его в качестве шрифта по умолчанию. Courier New также является стандартным шрифтом для фильмов. сценарии.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Brush Script MT (курсив)

Шрифт Brush Script MT имитирует почерк. Он элегантен и утончен, но может быть труден для чтения. Используйте его осторожно.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Совет: Также ознакомьтесь со всеми доступными шрифтами Google и узнайте, как их использовать.

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

4 904 904 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
| О

W3Schools оптимизирован для обучения и обучения.

No related posts.