使用 @font-face 规则时,你需要指定字体文件的路径,并使用 font-family 属性定义字体名称。这样,你就可以通过在样式中使用这个字体名称来应用自定义字体。
下面是一个基本的 @font-face 规则的例子:
@font-face {
font-family: 'CustomFont';
src: url('path/to/custom-font.woff2') format('woff2'),
url('path/to/custom-font.woff') format('woff');
/* 可以添加更多的字体格式,如 truetype (.ttf)、opentype (.otf) */
font-weight: normal;
font-style: normal;
}
这个例子中:
- font-family: 定义字体名称,后续可以在样式中使用。
- src: 指定字体文件的路径,以及文件格式,以确保浏览器能够正确加载。在这个例子中,提供了 WOFF2 和 WOFF 格式的字体文件路径。
- font-weight 和 font-style: 分别定义字体的粗细和风格。这两个属性是可选的。
一旦定义了 @font-face 规则,你就可以在其他样式规则中使用这个自定义字体:
body {
font-family: 'CustomFont', sans-serif;
}
这样,body 元素及其子元素将使用定义的 CustomFont 字体,如果该字体不可用,则会回退到系统中的 sans-serif 字体。
转载请注明出处:http://www.zyzy.cn/article/detail/6074/CSS