Главная » Языки программирования

Как сделать шрифт тоньше css

Содержание
  1. font-weight
  2. Try it
  3. Syntax
  4. Values
  5. Fallback weights
  6. Meaning of relative weights
  7. Common weight name mapping
  8. Variable fonts
  9. Accessibility concerns
  10. Formal definition
  11. Formal syntax
  12. Examples
  13. Setting font weights
  14. HTML
  15. CSS
  16. Result
  17. Specifications
  18. Browser compatibility
  19. See also
  20. Found a content problem with this page?
  21. MDN
  22. Support
  23. Our communities
  24. Developers
  25. font — weight
  26. Примеры
  27. Как понять
  28. Как пишется
  29. Подсказки
  30. Ещё примеры
  31. На практике
  32. Денис Русаков советует
  33. Алёна Батицкая советует

font-weight

The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.

Try it

Syntax

/* Keyword values */ font-weight: normal; font-weight: bold; /* Keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* Numeric keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; /* normal */ font-weight: 500; font-weight: 600; font-weight: 700; /* bold */ font-weight: 800; font-weight: 900; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: revert; font-weight: revert-layer; font-weight: unset;

The font-weight property is specified using any one of the values listed below.

Values

Normal font weight. Same as 400 .

Bold font weight. Same as 700 .

One relative font weight lighter than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.

One relative font weight heavier than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.

In earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts using the Fallback weights system.

Читайте также:  I left my heart on Europa

CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000 and introduces Variable fonts, which can make use of this much finer-grained range of font weights.

Fallback weights

If the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered:

  • If the target weight given is between 400 and 500 inclusive:
    • Look for available weights between the target and 500 , in ascending order.
    • If no match is found, look for available weights less than the target, in descending order.
    • If no match is found, look for available weights greater than 500 , in ascending order.

    Meaning of relative weights

    When lighter or bolder is specified, the below chart shows how the absolute font weight of the element is determined.

    Note that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900). If a font-family has more weights available, they are ignored for the purposes of relative weight calculation.

    Inherited value bolder lighter
    100 400 100
    200 400 100
    300 400 100
    400 700 100
    500 700 100
    600 900 400
    700 900 400
    800 900 700
    900 900 700

    Common weight name mapping

    The numerical values 100 to 900 roughly correspond to the following common weight names (see the OpenType specification):

    Value Common weight name
    100 Thin (Hairline)
    200 Extra Light (Ultra Light)
    300 Light
    400 Normal (Regular)
    500 Medium
    600 Semi Bold (Demi Bold)
    700 Bold
    800 Extra Bold (Ultra Bold)
    900 Black (Heavy)
    950 Extra Black (Ultra Black)

    Variable fonts

    Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.

    For TrueType or OpenType variable fonts, the «wght» variation is used to implement varying widths.

    Note: For the example below to work, you’ll need a browser that supports the CSS Fonts Level 4 syntax in which font-weight can be any number between 1 and 1000 . The demo loads with font-weight: 500; . Change the value to see the weight of the text change.

    Accessibility concerns

    People experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (Thin/Hairline) or 200 (Extra Light), especially if the font has a low contrast color ratio.

    Formal definition

    Initial value normal
    Applies to all elements. It also applies to ::first-letter and ::first-line .
    Inherited yes
    Computed value the keyword or the numerical value as specified, with bolder and lighter transformed to the real value
    Animation type a font weight

    Formal syntax

    font-weight =
    |
    bolder |
    lighter

    =
    normal |
    bold |

    Examples

    Setting font weights

    HTML

    p> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice "without pictures or conversations?" p> div> I'm heavybr /> span>I'm lighterspan> div>

    CSS

    /* Set paragraph text to be bold. */ p  font-weight: bold; > /* Set div text to two steps heavier than normal but less than a standard bold. */ div  font-weight: 600; > /* Set span text to be one step lighter than its parent. */ span  font-weight: lighter; >

    Result

    Specifications

    Browser compatibility

    BCD tables only load in the browser

    See also

    Found a content problem with this page?

    This page was last modified on Jul 26, 2023 by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    Our communities

    Developers

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

    Источник

    font — weight

    Свойство font — weight задаёт насыщенность шрифта: от самого тонкого до самого жирного начертания.

    Примеры

    Скопировать ссылку «Примеры» Скопировано

     div  font-weight: normal; font-weight: bold;> div  font-weight: normal; font-weight: bold; >

    Значения относительно родительского элемента:

     div  font-weight: lighter; font-weight: bolder;> div  font-weight: lighter; font-weight: bolder; >      
     div  font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900;> div  font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; >

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    Большинство шрифтов имеют два варианта начертания: обычное normal и жирное bold . Их в основном и используют.

    Но браузер может отобразить и более тонкие или толстые варианты, если шрифт их поддерживает. Такие варианты задаются с помощью слов lighter и bolder или в условных единицах от сверхсветлого начертания 100 до сверхжирного или «чёрного» 900 с шагом 100 единиц.

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Толщину текста можно задать с помощью ключевых слов или числовым значением:

    • normal — стандартная толщина шрифта. Соответствует значению 400. Значение по умолчанию.
    • bold — жирный набор текста. Соответствует 700.
    • lighter — более тонкий вариант, чем в родительском элементе. Например, светлое начертание Light.
    • bolder — более насыщенный вариант, чем в родительском элементе. Например, сверхжирное начертание Extra Bold.
    • 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 — условные единицы насыщенности, где 400 — это стандартная насыщенность текста. Используются редко, так как большинство шрифтов имеют только обычное и жирное написание.

    Подсказки

    Скопировать ссылку «Подсказки» Скопировано

    💡 Если всё же решишь использовать цифры, но у выбранного шрифта нет такого варианта насыщенности, то для значений от 100 до 500 браузер выберет стандартный вариант normal , а от 600 до 900 — жирный шрифт bold .

    Ещё примеры

    Скопировать ссылку «Ещё примеры» Скопировано

    Попробуем задать насыщенность сразу разными способами к разным элементам кода:

       
    Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold. В цифровом значении он равен 700 единицам.
      
    Это текст стандартной толщины внутри контейнера 
    . Он эквивалентен 400 единицам толщины.
      Это текст внутри контейнера — и он чуть толще, чем стандартный normal, но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500. В контейнере шрифт тоньше, чем в , внутри которого он находится. Его мы задали с помощью значения lighter.       body> h1>Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold. В цифровом значении он равен 700 единицам.h1> p> Это текст стандартной толщины внутри контейнера p>. Он эквивалентен 400 единицам толщины.p> div> Это текст внутри контейнера div> — и он чуть толще, чем стандартный normal, но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500.br> span>В контейнере span> шрифт тоньше, чем в div>, внутри которого он находится. Его мы задали с помощью значения lighter.span> div> body>          
     body  font-family: "Roboto", sans-serif;> /* Зададим толщину заголовка с помощью слова bold. */h1  font-weight: bold;> /* Обычный текст в абзаце 
    сделаем стандартным normal */p  font-weight: normal;> /* В контейнере текст будет средним по жирности между normal и bold */div  font-weight: 500;> /* В элементе текст будет на один уровень меньше по жирности,чем у родительского элемента, внутри которого он находится */span  font-weight: lighter;> body  font-family: "Roboto", sans-serif; > /* Зададим толщину заголовка с помощью слова bold. */ h1  font-weight: bold; > /* Обычный текст в абзаце 
    сделаем стандартным normal */ p  font-weight: normal; > /* В контейнере текст будет средним по жирности между normal и bold */ div  font-weight: 500; > /* В элементе текст будет на один уровень меньше по жирности, чем у родительского элемента, внутри которого он находится */ span  font-weight: lighter; >

    На практике

    Скопировать ссылку «На практике» Скопировано

    Денис Русаков советует

    Скопировать ссылку «Денис Русаков советует» Скопировано

    🛠 У каждого значения насыщенности есть своё название, принятое в типографике.

    Распространённые названия насыщенности

    • 100 — тонкое начертание (thin, hairline);
    • 200 — сверхсветлое (extra light, ultra light);
    • 300 — светлое (light);
    • 400 — нормальное (normal, regular, book);
    • 500 — среднее (medium);
    • 600 — полужирное (semi bold, demi bold);
    • 700 — жирное (bold);
    • 800 — сверхжирное (extra bold, ultra bold);
    • 900 — тяжёлое (black, heavy).

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

    Чтобы использовать все 9 начертаний (100–900), шрифт должен их поддерживать. В противном случае браузер будет подбирать ближайшее подходящее начертание из тех, что есть в подключаемом шрифте и поэтому надёжнее использовать то значение font — weight , которое вы указали в директиве font — face .

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

    Алёна Батицкая советует

    Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

    🛠 Относительные значения bolder и lighter не используются почти никогда. Причина в том, что они относительные. Как итог если меняется вес шрифта родительского элемента — меняется вес шрифта ребёнка. Но это, чаще всего, не то что нужно. Совет: используй всегда абсолютный вес шрифта.

    Источник

Оцените статью
© 2024 Программирование