Css font одной строкой

font

CSS-свойство font является сокращением для font-style , font-variant (en-US), font-weight , font-stretch (en-US), font-size , line-height , и font-family . Кроме того, он позволяет установить системный шрифт для элементов интерфейса.

Интерактивный пример

Как и с любым сокращённым свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращённых свойств). Свойства font-size-Adjust (en-US) и font-kerning (en-US) хоть и не могут быть напрямую установлены с помощью font , но они также сбрасываются к своим начальным значениям.

Синтаксис

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:
    • (en-US)
    • (en-US)
    • 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.

    Значения

    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 .

    Формальный синтаксис

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

    =
    normal | (en-US)
    small-caps

    =
    normal | (en-US)
    ultra-condensed | (en-US)
    extra-condensed | (en-US)
    condensed | (en-US)
    semi-condensed | (en-US)
    semi-expanded | (en-US)
    expanded | (en-US)
    extra-expanded | (en-US)
    ultra-expanded

    Примеры

    /* 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 it's 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; > 

    var textAreas = document.getElementsByClassName("curCss"), shortText = "", getCheckedValue, setCss, getProperties, injectCss; getProperties = function ()  shortText = getCheckedValue("font_style") + " " + getCheckedValue("font_variant") + " " + getCheckedValue("font_weight") + " " + getCheckedValue("font_size") + getCheckedValue("line_height") + " " + getCheckedValue("font_family"); return shortText; > getCheckedValue = function(radio_name)  oRadio = document.forms[0].elements[radio_name]; for (var i = 0; i  oRadio.length; i++)  if(oRadio[i].checked)  var propInput = "input_" + radio_name, curElemName = "input_" + radio_name, curElem = document.getElementById(curElemName); curElem.value = oRadio[i].value; return oRadio[i].value; > > > setCss = function ()  getProperties(); injectCss(shortText); > injectCss = function(cssFragment)  old = document.body.getElementsByTagName("style"); if (old.length > 1)  old[1].parentElement.removeChild(old[1]); > css = document.createElement("style"); css.innerHTML = ".fontShortHand + cssFragment + ">"; document.body.appendChild(css); > setCss(); 

    Спецификации

    • font-style : normal
    • font-variant (en-US): normal
    • font-weight : normal
    • font-stretch (en-US): normal
    • font-size : medium
    • line-height : normal
    • font-family : зависит от браузера
    • font-size : относятся к размеру шрифта родителя
    • line-height : относятся к размеру шрифта самого элемента
    • font-style : как указано
    • font-variant (en-US): как указано
    • font-weight : ключевое слово или числовое значение, с bolder и lighter , трансформируемися в действительное значение
    • font-stretch (en-US): как указано
    • font-size : как указано, но с относительной длиной, конвертируемой в абсолютные длины
    • line-height : для процентов и значений длин, абсолютной длины, если другое не указано
    • font-family : как указано
    • font-style : by computed value type; normal animates as oblique 0deg
    • font-variant (en-US): discrete
    • font-weight : жирность шрифта
    • font-stretch (en-US): ширина начертания шрифта (en-US)
    • font-size : длина
    • line-height : число или длина
    • font-family : discrete

    Поддержка браузерами

    BCD tables only load in the browser

    Источник

    font

    Свойство font объединяет в себе все свойства, которые используются для определения шрифта.

    Свойства, которые можно задать (по порядку): font-style, font-variant, font-weight, font-size/line-height, font-family.

    Любое из свойств может отсутствовать, если это необходимо. В случае отсутствия свойства, оно будет автоматически заменено на значение по умолчанию.

    Значение по умолчанию:	зависит от используемых аргументов
    Наследуется:	да
    Версия:	CSS1

    Аргументы

    Значение	Описание
    font-style	Определяет стиль шрифта
    font-variant	Определяет тип шрифта
    font-weight	Определяет жирность шрифта
    font-size / line-height	Определяет размер шрифта / отступ между строками
    font-family	Определяет название шрифта
    caption	Используется шрифт, который применяется в кнопках, выпадающих списках и т.д.
    icon	Шрифт, который используется для ярлыков иконок
    menu	Шрифт, который используется для меню
    message-box	Шрифт, который используется для диалоговых окон
    small-caption	Уменьшенная версия заглавного шрифта
    status-bar	Шрифт, который используется для строки состояния
    inherit	Значение должно быть унаследовано от элемента родителя

    Источник

    Читайте также:  Php header ошибка 404