css中字体的引用方式

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中,字体的引用方式有多种,通常可以使用font-family属性来指定对应的字体族名称,并用逗号分隔其它辅助字体名称:p { font-family: Helvetica Neue ,Arial

CSS中,字体的引用方式有多种,通常可以使用font-family属性来指定对应的字体族名称,并用逗号分隔其它辅助字体名称:

p {
  font-family: "Helvetica Neue",Arial,sans-serif;
} 

上述代码中,当浏览器无法加载"Helvetica Neue"字体时,就会尝试加载Arial字体,并最终退而使用系统默认的sans-serif字体。

除了使用字体族名称,也可以通过引用外部字体文件来指定字体。在CSS中使用@font-face规则来定义字体,并为其指定名称和字体源:

@font-face {
  font-family: "MyFont"; /* 指定字体名称 */
  src: url("myfont.woff2") format("woff2"), /* 指定字体源 */
       url("myfont.woff") format("woff");
}
 
p {
  font-family: "MyFont", Arial, sans-serif; /* 使用自定义字体 */
} 

上述代码中,@font-face规则定义了名为"MyFont"的自定义字体,并将它们包含在woof2和woof两个文件中。使用font-family属性,页面中的p元素就可以使用"MyFont"字体,如果浏览器无法加载自定义字体,就会替换为Arial或系统默认sans-serif字体。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中字体的引用方式

粉丝

0

关注

0

收藏

0

已有0次打赏