Руководство CSS Fonts

CSS font
CSS font-family
CSS font-size
CSS font-weight
CSS font-style
CSS font-stretch
CSS font-synthesis
Appendix: Generic family names

1. CSS font

CSS font используется для настройки шрифта (font) элемента, имеется 2 способа использования CSS font:

CSS {font: «keyword»}

Значение CSS font может принять одно из ключевых слов ниже. Это поможет вам использовать шрифты предопределенные системой, зависит от браузера и операционной системы пользоватея.

caption
icon
menu
message-box
small-caption
status-bar

CSS {font: «font-size» «font-family» ...; }

Значение CSS font может быть сочетанием свойств (property): font-size, font-family, font-style, font-variant, ...

Ниже является синтаксис CSS font, выражение расположенное в квадратных скобках (square brackets) [ ] является необязательным.

Syntax

font: [ <'arg1'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'>

/* Where */

<'arg1'> = <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'>

Посмотрите пример, он поможем вам генерировать (generate) значение для CSS font.

https://ex1.o7planning.com/css/fonts/font-example.html

Имеется много красивых и бесплатных шрифтов, которые вы можете найти в ссылке ниже:
https://www.fontsquirrel.com/

2. CSS font-family

CSS font-family используется, чтобы вы определили список "font family name" или "generic family name" для применения к элементу, они отделены запятой. Первому названию шрифта будет предоставлен приоритет использования, названия следующих шрифтов являются резервными копиями.

font family name

Является названием определенного шрифта, например Arial, Roboto, Times New Roman, ...

generic family name

Общее название (generic name) предопределенное в CSS, оно представляет шрифты имеющие общую характеристику. Когда вы используете "общее название" значит вас интересует только характеристика шрифта и браузер выберет подходящий шрифт для вас.

Ниже являются некоторые такие общие названия "generic family name":

serif
sans-serif
monospace
cursive
fantasy
system-ui
emoji
math
fangsong

Вы можете изучить больше про "Generic family name" в приложении данной статьи.

Пример с CSS font-family:

/* A font family name and a generic family name */
font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: emoji;
font-family: math;
font-family: fangsong;

/* Global values */
font-family: inherit;
font-family: initial;
font-family: unset;

font-family-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS font-family</title>
    <meta charset="UTF-8"/>
    <script>
        function setFontFamily(value) {
           var element = document.getElementById("my-div");
           element.style.fontFamily = value;
        }
    </script>
    <style>
      .option {
         padding: 5px;
         display:inline-block;
         border: 1px solid gray;
      }
       #my-div {
          border: 1px solid gray;
          margin-top: 10px;
          padding: 15px;
       }
    </style>
</head>
<body>
    <h3>CSS font-family</h3>
    <div class="option">
      <p style="color:red;">font-family:</p>
      <input name ="x" type="radio" onClick="setFontFamily('Georgia, serif')" />
       {font-family: Georgia, serif;} <br/>
      <input name ="x" type="radio" onClick="setFontFamily('''Gill Sans'', sans-serif')" />
       {font-family: "Gill Sans", sans-serif;} <br/>
      <input name ="x" type="radio" onClick="setFontFamily('sans-serif')" />
       {font-family: sans-serif;} <br/>
      <input name ="x" type="radio" onClick="setFontFamily('serif')" />
       {font-family: serif;} <br/>
      <input name ="x" type="radio" onClick="setFontFamily('cursive')" />
       {font-family: cursive;} <br/>
      <input name ="x" type="radio" onClick="setFontFamily('system-ui')" />
       {font-family: system-ui;}
    </div>
    <div id = "my-div">
      Apollo 11 was the spaceflight that landed the first humans,
      Americans Neil Armstrong and Buzz Aldrin,
      on the Moon on July 20, 1969, at 20:18 UTC.
      Armstrong became the first to step onto the lunar
      surface 6 hours later on July 21 at 02:56 UTC.
    </div>
</body>
</html>

Если вы хотите использовать специальные шрифты неимеющиеся в системе или кастомизированные шрифты, вам нужно их объявить через синтаксис @font-face.
Руководство CSS @font-face

3. CSS font-size

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

/* <absolute-size> values */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

/* <relative-size> values */
font-size: smaller;
font-size: larger;

/* <length> values */
font-size: 12px;
font-size: 0.8em;

/* <percentage> values */
font-size: 80%;

/* Global values */
font-size: inherit;
font-size: initial;
font-size: unset;

Pixel (px)

Настроить размер для элемента по единице pixel (px) является хорошим выбором, так как она является статическим значением, независит от операционной системы и браузера.

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

Например элемент настроен {font-size: 2em}, его родительский элемент настроен {font-size: 15px}, значит 1em = 15px, то есть 2em = 30px.

unit-em-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS font-size</title>
    <meta charset="UTF-8"/>
    <style>
       span {
          font-size: 2em;
       }
    </style>
</head>
<body>
    <h3>CSS font-size (Unit: em)</h3>
    Default font size (Font size of body). <br/>
    <span style="font-size: 11px;">
       Span (1)
       <span>
           Span (1.1)
           <span> Span (1.1.1)</span>
       </span>
    </span>
</body>
</html>

Rem

Настройка размера шрифта по единице Rem значит его размер будет зависеть от шрифта исходного HTML элемента, а не родительского элемента.

К примеру элемент настроен {font-size: 2em}, его исходный HTML элемент настроен {font-size: 15px}, значит 1rem = 15px, то есть 2rem = 30px.

unit-rem-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS font-size</title>
    <meta charset="UTF-8"/>
    <style>
       html  {
          font-size: 15px;
       }
    </style>
</head>
<body>
    <h3>CSS font-size (Unit: rem)</h3>
    Default font size (Font size of body). <br/><br/>
    <span style="font-size: 2rem;">
       Span (1)
       <span style="font-size: 1rem;">
           Span (1.1)
           <span style="font-size: 2rem;"> Span (1.1.1)</span>
       </span>
    </span>
</body>
</html>

Единицы в CSS
Руководство CSS line-height

4. CSS font-weight

CSS font-weight используется для настройки начертание (weight) шрифта. Оно так же известно как жирность (boldness) шрифта.

/* Keyword values */
font-weight: normal;
font-weight: bold;

font-weight: lighter;
font-weight: bolder;

/* Numeric keyword values */
font-weight: 1
font-weight: 100;
font-weight: 100.6;
font-weight: 123;
font-weight: 200;
font-weight: 300;
font-weight: 321;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: 1000;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

По спецификации CSS Fonts Module Level 4, начертание шрифта может быть любым значением между 1 до 1000. Все другие значения считаются недействительными. Данная спецификация вступает в силу с Сентября 2018 года.

Некоторые ключевые слова как normal, bold, bolder, lighter обычно используются для описания начертания шрифта.

Ключевое слово	Описание
normal	Похоже на 400
bold	Похоже на 700
bolder	Определяет начертание шрифта более жирным чем унаследованное значение.
lighter	Определяет начертание шрифта менее жирным чем унаследованное значение.

Шрифт считается хорошим (гладким), если он предоставляет много "видов" (face) соотвествующих разным начертаниям. На самом деле, почти все шрифты предоставляют только "вид" (face) соотвествующий начертанию 400 (Normal) и 700 (Bold).

Например шрифт предоставляет только "виды" (face) соответствующие значениям 400, 700, 900. Если вы настроите {font-weight: 850} для элемента, понятно что данный шрифт не имеет готовый "вид" с начертанием 850, браузер будет использовать самое маленькое значение и использует значение 700.

Некоторые современные браузеры используют алгоритмы, чтобы создать "вид" (face) соответствующий любому начертанию, основываясь на готовые "виды" имеющиеся в семействе шрифтов (font family).

Пример ниже позволяет вам изменить начертание шрифта от 1 до 1000 и увидеть результат. Примечание: Результат, который вы видите может отличаться на разных браузерах и разных операционных системах.

https://ex1.o7planning.com/css/fonts/font-weight-range-example.html

Результат показанный на браузере Firefox и операционной системе Mac OS:

5. CSS font-style

CSS font-style используется для определения стиля шрифта.

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

/* Global values */
font-style: inherit;
font-style: initial;
font-style: unset;

Значения у CSS font-style:

normal

Использование обычных (normal) "видов" (face) семейства шрифтов (font family).

italic

Используйте готовые "виды" (face) italic (курсива) семейства шрифтов (font family). Если текущий шрифт не имеет "виды" italic то вид oblique (косой) будет использован как заменяющее решение.

oblique

Используйте "виды" (face) oblique (косого) семейства шрифта (font family). Если текущий шрифт не имеет "виды" oblique, то вид italic (курсив) будет использован как заменяющее решение.

oblique «angle»

Используйте "виды" (face) oblique (косого) семейства шрифта. Параметр «angle» это угол наклонения (slant) текста. Его значение от -90deg до 90deg, значением по умолчанию является 14deg. Браузер попытает найти подходящий "вид" для желаемого наклона. Если не имеется "вид" oblique в данном семействе шрифта, браузер создаст данный "вид" наклонив шрифт "вида" normal.

,Пример ниже позволяет вам изменить наклон (slant) шрифта и посмотреть результат. Примечание: Результат, который вы увидете может быть разным на разных браузерах и операционных системах.

Результат показанный на браузере Firefox.

6. CSS font-stretch

В семействе шрифта (font family), один симвл имеет много видов (face) с разной шириной (width). CSS font-stretch позволяет вам выбрать один из тех вариантов.

/* Keyword values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* Percentage values */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;

Возможные значения у CSS font-stretch:

normal

Определить нормальный вид шрифта (normal).

semi-condensed, condensed, extra-condensed, ultra-condensed

Определить более узкий (condensed) шрифт чем нормальный (normal), другими словами ширина меньше чем обычно. С ultra-condensed это самый узкий.

semi-expanded, expanded, extra-expanded, ultra-expanded

Определить более расширенный шрифт (expanded) чем нормальный (normal), или сказать по другому ширина больше чем обычно. С ultra-expanded это самый расширенный.

«percentage»

CSS stretch так же принимает процентное значение ( % ), действительное значение в диапазоне от 50% до 200%.

ultra-condensed	50%
extra-condensed	62.5%
condensed	75%
semi-condensed	87.5%
normal	100%
semi-expanded	112.5%
expanded	125%
extra-expanded	150%
ultra-expanded	200%

Примечание: Синтаксис CSS font-stretch с процентным значением включенный в CSS в спецификации CSS Fonts Level 4. Предыдущая версия (CSS Fonts Level 3) поддерживает только 9 ключевых слов, упомянутых выше.

Семейство шрифта (font family) может не иметь готовые виды (face) шрифта соответствующие процентному значению (Или 9 ключевым словам упомянутым выше) у CSS font-stretch. Браузер будет искать подходящий готовый шрифт в font family, он не будет автоматически создавать новый шрифт с помощью геометрических алгоритмов.

7. CSS font-synthesis

Почти все стандартный европейские шрифты включает варианты курсив (italic) и жирный (bold), но многие новые шрифты не включают их. Шрифты использованные для китайского, японского, корейского и другие и других логографических шрифтов, как правило не включают данные варианты.

Браузеры могут сами синтезировать (synthesize) варианты bold, italic. Или по другому, браузеры используют алгоритмы для создания вида (face) наклонного шрифта (italic) и жирного (bold) из обычных шрифтов (normal).

CSS font-synthesis позволяет вам определить "гарнитуру" (typeface), какой браузер может автоматически создать варианты.

font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: weight style;

/* Global values */
font-synthesis: initial;
font-synthesis: inherit;
font-synthesis: unset;

Возможные значения для CSS synthesis:

none

Если семейство шрифта (font family) не имеет готовые шрифты italic, bold, браузеру не разрешается автоматически создавать данные шрифты.

style

Если семейство шрифта (font family) не имеет шрифта italic, браузер может автоматически создать данный вид шрифта из шрифта normal. Но не может автоматчески создать из шрифта bold.

weight

Если семейство шрифта (font family) не имеет шрифта bold, браузер может автоматически создать данный вид шрифта из шрифта normal. Но не может автоматчески создать из шрифта italic.

style weight || weight style

Если семейство шрифта (font family) не имеет шрифта bold или italic, браузер может автоматически создать данные виды шрифта из шрифта normal.

Поддержка CSS font-synthesis браузеров:

Property
font-synthesis			34.0	9.0

Пример с CSS font-synthesis.

font-synthesis-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS font-synthesis</title>
      <meta charset="UTF-8"/>
      <link rel="stylesheet" type="text/css" href="font-synthesis-example.css" />
      <script>
          function setFontSynthesis(value) {
             var element = document.getElementById("my-div");
             element.style.fontSynthesis = value;
          }
      </script>
   </head>
   <body>
      <h3>CSS font-synthesis</h3>
      <p class="info">Most Western fonts include <span class="bold">bold</span> or
         <span class="italic">italic</span> variants but Chinese, Japanese, Korean fonts tend not to.
      </p>
      <div class="option">
        <p style="color:red;">font-synthesis:</p>
        <input name ="x" type="radio" onClick="setFontSynthesis('none')" /> none <br/>
        <input name ="x" type="radio" onClick="setFontSynthesis('style')" /> style <br/>
        <input name ="x" type="radio" onClick="setFontSynthesis('weight')" /> bold <br/>
        <input name ="x" type="radio" onClick="setFontSynthesis('style weight')" /> style weight
      </div>
      <div id="my-div">
         中文排版通常不运用<span class="bold">粗体</span>或<span class="italic">斜体</span>。
       </div>
   </body>
</html>

font-synthesis-example.css

#my-div {
    font-size:1.2em;
    font-family:KaiTi,serif;
    margin-top:10px;
}
.option {
   padding: 5px;
   display:inline-block;
   border: 1px solid gray;
}
.bold{
     font-weight:bold;
}
.italic{
    font-style:italic;
}

Результат запуска примера с браузером Firefox (Браузер поддерживает CSS font-synthesis).

8. Appendix: Generic family names

Понимание Generic Font Family Names в CSS

No ADS