CSS3 @font-face 规则

易天海

于 2019-12-19 16:05:27 发布

阅读量427

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/huawuque004/article/details/103616212

前端专栏收录该内容

116 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

CSS3的@font-face规则允许开发者在网页中使用自定义字体，从而提升网站的视觉风格。本文将详细讲解如何定义和使用@font-face，包括字体文件格式的选择、字体家族的设置以及浏览器兼容性问题的解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

@font-face {
  font-family: 'revicons';
  src: url('../fonts/revicons/revicons.eot?5510888');
  src: url('../fonts/revicons/revicons.eot?5510888#iefix') format('embedded-opentype'),
       url('../fonts/revicons/revicons.woff?5510888') format('woff'),
       url('../fonts/revicons/revicons.ttf?5510888') format('truetype'),
       url('../fonts/revicons/revicons.svg?5510888#revicons') format('svg');
  font-weight: normal;
  font-style: normal;
}

 [class^="revicon-"]:before, [class*=" revicon-"]:before {
  font-family: "re