CSS 引入字体

涉及知识

@font-face

@font-face 定义一个用于文本显示的自定义字体。详细内容可以参考 MDN文档 。

特点

1. 可以自定义字体名称和与名称对应的字体文件
2. 可以消除用户对电脑字体的依赖
3. 可以用于字体图标的引入

用法

@font-face {
   
  font-family: "myFont";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-stretch: "normal";
  font-weight: 400;
}

属性解析

字体描述	值	说明
font-family	name	必需的。定义字体的名称。
src	URL	必需的。定义该字体下载的网址或者文件路径
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义该字体应该如何被拉长。默认值是"normal"
font-style	normal italic oblique	可选。定义该字体应该是怎样样式。默认值是"normal"
font-weight