Css указать шрифт: Как изменить шрифт в css

font-family — Справочник CSS

#10094; Назад CSS Справочник Далее #10095;

Пример

Указать шрифт для двух параграфов:

p.a {
  font-family: «Times New Roman», Times, serif;
}

p.b {
  font-family: Arial, Helvetica, sans-serif;
}

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

Определение и использование

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

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

У свойств есть два типа фамилий шрифтов:

• family-name — Имя семейства шрифтов, например «times», «courier», «arial», т.д.
• generic-family — Имя родового семейства, например «serif», «sans-serif», «cursive», «fantasy», «monospace».

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

Пимечание: Разделите каждое значение запятой.

Пимечание: Если имя шрифта содержит пробелы, оно должно быть заключено в кавычки. Одинарные кавычки должны использоваться при использовании атрибута «style» в HTML.

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
font-family	1.0	4.0	1.0	1.0	3. 5

CSS Синтаксис

font-family: family-name|generic-family|initial|inherit;

Значения свойств

Связанные страницы

CSS Учебник: CSS Шрифт

CSS Справочник: Свойство font

HTML DOM Справочник: Свойство fontFamily

#10094; Назад CSS Справочник Далее #10095;

Переменные шрифты-это эволюция спецификации OpenType,которая позволяет включать в один файл множество различных вариантов шрифтов,а не

Переменные шрифты — это эволюция спецификации шрифтов OpenType, которая позволяет включать в один файл множество различных вариантов гарнитуры, а не иметь отдельный файл шрифта для каждой ширины, веса или стиля. Они позволяют вам получить доступ ко всем вариантам, содержащимся в данном файле шрифта, через CSS и одну ссылку @font-face . Эта статья даст вам все, что вам нужно знать, чтобы начать использовать переменные шрифты.

Примечание. Чтобы использовать вариативные шрифты в вашей операционной системе, вам необходимо убедиться, что она актуальна. Например, операционным системам Linux требуется последняя версия Linux Freetype, а macOS до High Sierra (10.13) не поддерживает переменные шрифты. Если ваша операционная система устарела, вы не сможете использовать переменные шрифты на веб-страницах или в инструментах разработчика Firefox.

Переменные шрифты:что они собой представляют и чем отличаются.

Чтобы лучше понять,чем отличаются переменные шрифты,стоит посмотреть,на что похожи неизменяемые шрифты и как они сравниваются.

Стандартные (или статические)шрифты

В прошлом шрифт выпускался в виде нескольких отдельных шрифтов,и каждый шрифт представлял одну определенную комбинацию ширины/веса/стиля. Таким образом,у вас будут отдельные файлы для ‘Roboto Regular’,’Roboto Bold’ и ‘Roboto Bold Italic’-это означает,что для представления полного шрифта у вас может быть 20 или 30 различных файлов шрифтов (для большого шрифта с разной шириной это может быть в несколько раз больше).

В таком сценарии,чтобы использовать шрифт для типичного использования на сайте для основного текста,вам понадобится как минимум четыре файла:обычный,курсив,полужирный и полужирный курсив.Если вы захотите добавить дополнительные веса,например,более легкий для подписей или более тяжелый для дополнительного акцента,это будет означать еще несколько файлов.Это приводит к увеличению количества HTTP-запросов и загрузке большего количества данных (обычно около 20 тыс.или более на файл).

Variable fonts

При использовании переменного шрифта все эти перестановки могут содержаться в одном файле.Этот файл будет больше,чем один шрифт,но в большинстве случаев меньше или примерно такого же размера,как 4,которые вы можете загрузить для телесного копирования. Преимущество выбора переменного шрифта заключается в том,что вы имеете доступ ко всему диапазону весов,ширины и стилей,а не ограничиваетесь только теми немногими,которые вы ранее загружали бы по отдельности.

Это позволяет использовать такие распространенные типографские приемы,как написание заголовков разного размера с разным весом для лучшей читабельности при каждом размере или использование немного меньшей ширины для отображения больших объемов данных.Для сравнения,в типографской системе журнала типично использование 10-15 или более различных комбинаций веса и ширины во всей публикации-что дает гораздо более широкий диапазон стилей,чем в настоящее время типично для Интернета (или действительно практично только по причинам производительности).

Записка о семействах шрифтов,весах и вариантах.

Вы можете заметить,что мы говорили о необходимости иметь отдельный файл шрифта для каждого веса и стиля (т.е.жирный,курсив и жирный курсив),а не полагаться на то,что браузер синтезирует их. Причина этого в том,что большинство шрифтов имеют очень специфический дизайн для полужирного и курсивного начертания,который часто включает совершенно разные символы (например,строчные буквы «a» и «g» часто совершенно разные в курсивном начертании).Чтобы наиболее точно отразить дизайн шрифта и избежать различий между браузерами и тем,как они могут синтезировать или не синтезировать различные стили,при использовании неизменяемого шрифта лучше загружать файлы конкретных шрифтов,где это необходимо.

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

Введение «оси вариации

В основе нового формата вариативных шрифтов лежит концепция оси вариаций , описывающая допустимый диапазон этого конкретного аспекта дизайна шрифта. Таким образом, «ось веса» описывает, насколько легкими или жирными могут быть буквы; «ось ширины» описывает, насколько узкими или широкими они могут быть; «курсивная ось» описывает, присутствуют ли курсивные буквы и могут быть соответственно включены или выключены и т. д. Обратите внимание, что ось может быть диапазоном или двоичным выбором. Вес может варьироваться от 1 до 999, тогда как курсив может быть 0 или 1 (выключено или включено).

Как определено в спецификации, существует два вида осей:

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

Зарегистрированные оси и существующие атрибуты CSS

В этом разделе мы продемонстрируем пять зарегистрированных осей, определенных с примерами и соответствующим CSS. Там, где это возможно, включены как стандартный синтаксис, так и синтаксис более низкого уровня. Синтаксис нижнего уровня ( font-variation-settings ) был первым механизмом, реализованным для тестирования ранних реализаций поддержки переменного шрифта, и он необходим для использования новых или пользовательских осей помимо пяти зарегистрированных. Однако целью W3C было запретить использование этого синтаксиса, когда доступны другие атрибуты. Поэтому везде, где это возможно, следует использовать соответствующее свойство, а низкоуровневый синтаксис font-variation-settings использовать только для установки значений или осей, недоступных в противном случае.

Notes

1. При использовании
   font-variation-settings важно отметить, что имена осей чувствительны к регистру. Имена зарегистрированных осей должны быть в нижнем регистре, а пользовательские оси должны быть в верхнем регистре. Например:

   font-variation-settings: 'wght' 375, 'GRAD' 88;
   

   wght (вес) является зарегистрированной осью, а GRAD (класс) является заказной.
2. Если вы установили значения с помощью font-variation-settings и хотите изменить одно из этих значений, вы должны повторно объявить их все (точно так же, как когда вы устанавливаете функции font-feature-settings OpenType с помощью font-feature-settings ). Это ограничение можно обойти, используя настраиваемые свойства CSS (переменные CSS) для отдельных значений и изменяя значение отдельного настраиваемого свойства. Пример кода приведен в конце руководства.

Weight

wght (представленная тегом wght ) определяет ось дизайна, насколько тонкими или толстыми (легкими или тяжелыми, в типичных типографских терминах) могут быть штрихи букв. В течение долгого времени в CSS существовала возможность указать это через свойство

Следует отметить, что на данный момент в объявлении @font-face нет способа «сопоставить» конкретную точку на оси изменения переменного шрифта с ключевым словом, bold (или любым другим ключевым словом). Как правило, это может быть решено довольно легко, но требует дополнительного шага в написании вашего CSS:

font-weight: 375;
font-variation-settings: 'wght' 375;

CSS следующего примера может быть отредактирован,чтобы вы могли играть со значениями font-weight.

Width

Ширина (представленная тегом wdth ) определяет ось дизайна, насколько узкими или широкими (сжатыми или расширенными, в типографских терминах) могут быть буквы. Обычно это задается в CSS с помощью свойства font-stretch со значениями, выраженными в процентах выше или ниже «нормального» (100%), любое число больше 0 технически допустимо, хотя гораздо более вероятно, что диапазон упадет. ближе к отметке 100%, например 75%-125%. Если предоставленное числовое значение выходит за пределы диапазона, закодированного в шрифте, браузер должен отображать шрифт с ближайшим допустимым значением.

Примечание. Символ% не используется при использовании font-variation-settings .

font-stretch: 115%;
font-variation-settings: 'wdth' 115;

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

Italic

Italic ( ital ось) работает по- разному в том , что он либо включен , либо выключен; промежуточного нет. Курсивный шрифт часто включает буквенные формы, резко отличающиеся от вертикальных, поэтому при переходе от прямого к курсиву обычно происходит несколько замен глифов (или символов). Курсив и наклонный шрифт часто используются как взаимозаменяемые, но на самом деле они совершенно разные. Наклонный угол определяется в этом контексте термином slant (см. Раздел ниже), и гарнитура обычно имеет одно или другое, но не то и другое одновременно.

В CSS как курсив, так и наклонный начертание применяются к тексту с помощью свойства font-style .Также обратите внимание на введение font-synthesis: none; — что предотвратит случайное применение браузерами оси вариантов и синтезированного курсива. Это также можно использовать для предотвращения искусственного выделения жирным шрифтом.

font-style: italic;
font-variation-settings: 'ital' 1;
font-synthesis: none;

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

Slant

Наклон (представленный тегом slnt ), или, как его часто называют, «наклонный» — отличается от настоящего курсива тем, что он меняет угол наклона букв, но не выполняет какую-либо замену символов. Он также является переменным, поскольку выражается в виде числового диапазона. Это позволяет изменять шрифт в любом месте вдоль этой оси. Допустимый диапазон, как правило, составляет от 0 (вертикально) до 20 градусов — можно указать любое числовое значение в этом диапазоне, поэтому шрифт можно слегка наклонить. Однако допустимо любое значение от -90 до 90 градусов.

Примечание: deg ключевого слова не используются при использовании font-variation-settings .

font-style: oblique 14deg;
font-variation-settings: 'slnt' 14;

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

• CSS Fonts

  CSS Fonts-это модуль,определяющий свойства,связанные со шрифтами,и способ загрузки ресурсов.

• Руководство по использованию шрифтов OpenType

  Особенности шрифта или варианты относятся к различным стилям символов глифов,содержащихся в OpenType В некоторых шрифтах включена одна или несколько из этих особенностей.

• Optical size

  Это что-то новое для цифровых шрифтов и CSS, но многовековая техника проектирования создания металлического шрифта.

• CSS Fragmentation

  CSS Fragmentation-это модуль,определяющий,как отображается содержимое,когда оно разбито (фрагментировано)на несколько страниц,регионов или колонок.

• 1
• …
• 394
• 395
• 396
• 397
• 398
• …
• 857
• Next

Как установить семейство шрифтов текста с помощью CSS?

Улучшить статью

Сохранить статью

• Последнее обновление: 23 Дек, 2020

Улучшить статью

Сохранить статью

Свойство шрифта CSS используется для установки содержимого шрифтов элемента HTML. Свойство font-family определяет шрифт элемента. Он может иметь несколько шрифтов в качестве резервной системы, т. е. если браузер не поддерживает один шрифт, можно использовать другой.

Синтаксис:

 element_selector {
   семейство шрифтов: имя-шрифта | начальная | наследовать;
} 

Значения свойств:

• имя-шрифта: Имена шрифтов в кавычках, разделенные запятыми.
• начальный: Устанавливает для свойства значение по умолчанию.
• наследование: Наследует свойство родительского элемента.

Пример:

HTML

 семейство шрифтов:
       

 семейство шрифтов: Helvetica, без засечек;
          семейство шрифтов: Arial Narrow, без засечек; 
          семейство шрифтов: Tahoma, без засечек; 
          семейство шрифтов: Gill Sans, без засечек; 
          семейство шрифтов: Lucida, без засечек;  

 семейство шрифтов:
       

 семейство шрифтов: Times, serif;
          семейство шрифтов: Палатино, с засечками; 
          семейство шрифтов: Baskerville, с засечками; 
          семейство шрифтов: Georgia, с засечками;  

 семейство шрифтов:
       

 семейство шрифтов: Andale Mono, моноширинный;
          семейство шрифтов: Courier New, моноширинный; 
          семейство шрифтов: PT Mono, моноширинный; 
          семейство шрифтов: Monaco, моноширинный;  

 семейство шрифтов:
       

 семейство шрифтов: Comic Sans MS, курсив;
          семейство шрифтов: Bradley Hand, скоропись; 
          семейство шрифтов: Brush Script MT, курсив; 
          семейство шрифтов: Apple Chancery, скоропись;  

 семейство шрифтов:
       

 семейство шрифтов: Luminari, фэнтези;
          семейство шрифтов: "Boots & Spurs", фэнтези; 
          семейство шрифтов: Chalkduster, фэнтези; 
          семейство шрифтов: Trattatello, фэнтези; 
          семейство шрифтов: Papyrus, фэнтези;  

 семейство шрифтов:
       

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

 h2, h3, h4, h5, h5, h6, п {
          семейство шрифтов: Tahoma, без засечек; 
          }  

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