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

Css fonts for firefox

На чтение 9 мин
Содержание
  1. font
  2. Try it
  3. Constituent properties
  4. Syntax
  5. Values
  6. System font values
  7. Formal definition
  8. Formal syntax
  9. Examples
  10. Setting font properties
  11. Live sample
  12. Specifications
  13. Browser compatibility
  14. CSS Fonts
  15. Базовый пример
  16. Различные примеры шрифтов
  17. Отсылки
  18. Properties
  19. At-rules
  20. Руководство
  21. Specifications
  22. Found a content problem with this page?

font

The font CSS shorthand property sets all the different properties of an element’s font. Alternatively, it sets an element’s font to a system font.

Try it

As with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). Though not directly settable by font , the longhands font-size-adjust and font-kerning are also reset to their initial values.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

The font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.

If font is specified as a system keyword, it must be one of: caption , icon , menu , message-box , small-caption , status-bar .

If font is specified as a shorthand for several font-related properties, then:

  • it must include values for:
    • it may optionally include values for:
      • font-style , font-variant and font-weight must precede font-size
      • font-variant may only specify the values defined in CSS 2.1, that is normal and small-caps
      • font-stretch may only be a single keyword value.
      • line-height must immediately follow font-size , preceded by «/», like this: » 16px/3 «
      • font-family must be the last value specified.

      Values

      System font values

      The system font used for captioned controls (e.g., buttons, drop-downs, etc.).

      The system font used to label icons.

      The system font used in menus (e.g., dropdown menus and menu lists).

      The system font used in dialog boxes.

      The system font used for labeling small controls.

      The system font used in window status bars.

      Prefixed system font keywords

      Browsers often implement several more, prefixed, keywords: Gecko implements -moz-window , -moz-document , -moz-desktop , -moz-info , -moz-dialog , -moz-button , -moz-pull-down-menu , -moz-list , and -moz-field .

      Formal definition

      • font-style : normal
      • font-variant : normal
      • font-weight : normal
      • font-stretch : normal
      • font-size : medium
      • line-height : normal
      • font-family : depends on user agent
      • font-size : refer to the parent element’s font size
      • line-height : refer to the font size of the element itself
      • font-style : as specified
      • font-variant : as specified
      • font-weight : the keyword or the numerical value as specified, with bolder and lighter transformed to the real value
      • font-stretch : as specified
      • font-size : as specified, but with relative lengths converted into absolute lengths
      • line-height : for percentage and length values, the absolute length, otherwise as specified
      • font-family : as specified
      • font-style : by computed value type; normal animates as oblique 0deg
      • font-variant : discrete
      • font-weight : a font weight
      • font-stretch : a font stretch
      • font-size : a length
      • line-height : either number or length
      • font-family : discrete

      Formal syntax

      font =
      [ [ || || || ]? [ / ]? ] |
      caption |
      icon |
      menu |
      message-box |
      small-caption |
      status-bar

      =
      normal |
      small-caps

      =
      normal |
      ultra-condensed |
      extra-condensed |
      condensed |
      semi-condensed |
      semi-expanded |
      expanded |
      extra-expanded |
      ultra-expanded

      Examples

      Setting font properties

      /* Set the font size to 12px and the line height to 14px. Set the font family to sans-serif */ p  font: 12px/14px sans-serif; > /* Set the font size to 80% of the parent element or default value (if no parent element present). Set the font family to sans-serif */ p  font: 80% sans-serif; > /* Set the font weight to bold, the font-style to italic, the font size to large, and the font family to serif. */ p  font: bold italic large serif; > /* Use the same font as the status bar of the window */ p  font: status-bar; >

      Live sample

      p> Change the radio buttons below to see the generated shorthand and its effect. p> form action="createShortHand()"> div class="cf"> div class="setPropCont"> font-stylebr /> input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setCss()" /> label for="font-style-none">nonelabel>br /> input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setCss()" /> label for="font-style-normal">normallabel>br /> input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setCss()" /> label for="font-style-italic">italiclabel>br /> input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setCss()" /> label for="font-style-oblique">obliquelabel> div> div class="setPropCont"> font-variantbr /> input type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setCss()" /> label for="font-variant-none">nonelabel>br /> input type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setCss()" /> label for="font-variant-normal">normallabel>br /> input type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setCss()" /> label for="font-variant-small-caps">small-capslabel> div> div class="setPropCont"> font-weightbr /> input type="radio" id="font-weight-none" name="font_weight" value="" onchange="setCss()" /> label for="font-weight-none">nonelabel>br /> input type="radio" id="font-weight-normal" checked="" name="font_weight" value="400" onchange="setCss()" /> label for="font-weight-normal">normallabel>br /> input type="radio" id="font-weight-bold" name="font_weight" value="700" onchange="setCss()" /> label for="font-weight-bold">boldlabel> div> div class="setPropCont"> font-sizebr /> input type="radio" id="font-size-12px" name="font_size" value="12px" onchange="setCss()" /> label for="font-size-12px">12pxlabel>br /> input type="radio" id="font-size-16px" name="font_size" value="16px" checked="" onchange="setCss()" /> label for="font-size-16px">16pxlabel>br /> input type="radio" id="font-size-24px" name="font_size" value="24px" onchange="setCss()" /> label for="font-size-24px">24pxlabel> div> div class="setPropCont"> line-heightbr /> input type="radio" id="line-height-none" name="line_height" checked="" value="" onchange="setCss()" /> label for="line-height-none">nonelabel>br /> input type="radio" id="line-height-1.2" name="line_height" value="/1.2" onchange="setCss()" /> label for="line-height-1.2">1.2label>br /> input type="radio" id="line-height-3" name="line_height" value="/3" onchange="setCss()" /> label for="line-height-3">3label> div> br /> div class="setPropCont fontfamily"> font-familybr /> input type="radio" id="font-family-courier" name="font_family" checked="" value="courier" onchange="setCss(5,'courier')" /> label for="font-family-courier">courierlabel>br /> input type="radio" id="font-family-serif" name="font_family" value="serif" onchange="setCss()" /> label for="font-family-serif">seriflabel>br /> input type="radio" id="font-family-sans-serif" name="font_family" value="sans-serif" onchange="setCss()" /> label for="font-family-sans-serif">sans-seriflabel>br /> input type="radio" id="font-family-arial" name="font_family" value="arial" onchange="setCss()" /> label for="font-family-arial">Ariallabel>br /> input type="radio" id="font-family-monospace" name="font_family" value="monospace" onchange="setCss()" /> label for="font-family-monospace">monospacelabel>br /> input type="radio" id="font-family-cursive" name="font_family" value="cursive" onchange="setCss()" /> label for="font-family-cursive">cursivelabel>br /> input type="radio" id="font-family-fantasy" name="font_family" value="fantasy" onchange="setCss()" /> label for="font-family-fantasy">fantasylabel>br /> input type="radio" id="font-family-system-ui" name="font_family" value="system-ui" onchange="setCss()" /> label for="font-family-system-ui">system-uilabel>br /> div> div> div class="cf propInputs"> div class="propInputCont tar">font :div> div class="propInputCont"> input type="text" class="curCss" id="input_font_style" />br /> font-style br /> optional div> div class="propInputCont"> input type="text" class="curCss" id="input_font_variant" /> br /> font-variant br /> optional div> div class="propInputCont"> input type="text" class="curCss" id="input_font_weight" /> br /> font-weight br /> optional div> div class="propInputCont"> input type="text" class="curCss mandatory" id="input_font_size" /> br /> font-size br /> mandatory div> div class="propInputCont"> input type="text" class="curCss" id="input_line_height" /> br /> line-height br /> optional div> div class="propInputCont"> input type="text" class="curCss mandatory" id="input_font_family" /> br /> font-family br /> mandatory div> div> form> div class="fontShortHand">This is some sample text.div> br />br />br />br />br />br /> 
      body, input  font: 14px arial; overflow: hidden; > .propInputCont  float: left; text-align: center; margin-right: 5px; width: 80px; > .setPropCont  float: left; margin-right: 5px; width: 120px; > .propInputs, .setPropCont  margin-bottom: 1em; > .curCss  border: none; border-bottom: 1px solid black; text-align: center; width: 80px; > .mandatory  border-bottom-color: red; > .cf::before, .cf::after  content: " "; display: table; > .cf::after  clear: both; > .tar  width: 40px; text-align: right; > .fontfamily  display: inline-block; > 
      const textAreas = document.getElementsByClassName("curCss"); function getProperties()  return ( `$getCheckedValue("font_style")> ` + `$getCheckedValue("font_variant")> ` + `$getCheckedValue("font_weight")> ` + `$getCheckedValue("font_size")>` + `$getCheckedValue("line_height")> ` + `$getCheckedValue("font_family")>` ); > function getCheckedValue(radioName)  const radios = document.forms[0].elements[radioName]; for (let i = 0; i  radios.length; i++)  if (radios[i].checked)  const curElemName = `input_$radioName>`; const curElem = document.getElementById(curElemName); curElem.value = radios[i].value; return radios[i].value; > > > function setCss()  injectCss(getProperties()); > function injectCss(cssFragment)  const old = document.body.getElementsByTagName("style"); if (old.length > 1)  old[1].parentElement.removeChild(old[1]); > css = document.createElement("style"); css.textContent = `.fontShortHand $cssFragment>>`; document.body.appendChild(css); > setCss();

      Specifications

      Browser compatibility

      BCD tables only load in the browser

      Источник

      CSS Fonts

      CSS Fonts — модуль в CSS, который определяет свойства связанные со шрифтами и как шрифтовые ресурсы загружаются. Модуль позволяет вам задать стиль шрифта, вроде font-family, font-size и font-weight, lineheight и варианты отображения знаков, когда для одного доступны сразу несколько

      Базовый пример

      Следующий пример показывает простое использование шрифтовых свойств, стилизующих тэг

      .

      p  width: 600px; margin: 0 auto; font-family: "Helvetica Neue", "Arial", sans-serif; font-style: italic; font-weight: 100; font-variant-ligatures: normal; font-size: 2rem; letter-spacing: 1px; > 
      p>Three hundred years agobr> I thought I might get some sleepbr> I stretched myself out onna antique bedbr> An' my spirit did a midnite creepp>

      Вывод на экран будет следующим:

      Различные примеры шрифтов

      Вы можете найти множество вариантов шрифтов на v-fonts.com и axis-praxis.org; так же смотрите наше руководство Variable fonts (en-US) для большей информации по использованию.

      Отсылки

      Properties

      At-rules

      Руководство

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

      Особенности шрифтов или их варианты ссылаются на различные стили символов или букв, содержащиеся в OpenType. Руководство описывает такие вещи как лигатура (специальные символы объединяющие буквы вроде ‘fi’ или ‘ffl’), кернинг (то, как свободное место распределяется между различными символами) и другое. Всё перечисленное относится к особенностям OpenType и позволяет использовать в вебе специальные свойства и свойства контроля нижнего уровня font-feature-settings (en-US). В статье есть всё, что вам нужно знать об особенностях OpenType шрифтов в CSS.

      Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.

      Specifications

      Specification Status Comment
      CSS Fonts Module Level 4 Рабочий черновик Adds font-variation-settings (and related higher-level properties) and font-optical-sizing .
      CSS Fonts Module Level 3 Рекомендация Adds font-feature-settings (and related higher-level properties)
      CSS Level 2 (Revision 1) Рекомендация
      CSS Level 1 Рекомендация Initial definition

      Found a content problem with this page?

      This page was last modified on 26 мая 2023 г. by MDN contributors.

      Источник

      Читайте также:  text-align
Оцените статью
© 2023 Программирование