CSS @font-face规则

指定用于显示文本的自定义字体;字体可以从远程服务器加载，也可以从用户自己的计算机上本地安装的字体加载。

定义和用法

根据@font-face的规则，网页设计师不必再使用一种“Web安全”字体。
在@font-face规则中，您必须首先定义字体的名称（例如 myFirstFont），然后指向字体文件。
要将字体用于 HTML 元素，请通过字体系列属性引用字体的名称（myFirstFont） ：

语法

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}
Font descriptor Values Description
font-family name Required. Defines the name of the font.
src URL Required. Defines the URL(s) where the font should be downloaded from
font-stretch normal Optional. Defines how the font should be stretched. Default value is "normal"
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
font-style normal Optional. Defines how the font should be styled. Default value is "normal"
italic
oblique
font-weight normal Optional. Defines the boldness of the font. Default value is "normal"
bold
100
200
300
400
500
600
700
800
900
unicode-range unicode-range Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF"

示例

@font-face {
  font-family: "Open Sans";
  src: 
      url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), 
      url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

标签 css