CSS自定义多个字体引用

最新推荐文章于 2025-06-12 17:12:13 发布

weixin_30522095

最新推荐文章于 2025-06-12 17:12:13 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dhui/p/10431498.html

在 HTML 中，提供给我们的默认字体有很多，但因为在电脑上安装的字体有限，所以很多时候不能呈现出和设计稿上一样的效果，这时候我们就需要使用 css3 提供的 @font-face 来实现个性化字体了。

css 样式定义：

@font-face {
    font-family: "fontname"; 
    src: url(“fontname.woff”) format(“woff”),
          url(“fontname.ttf”) format(“truetype”),
          url(“fontname.eot”) format(“embedded-opentype”),
          url(“fontname.svg”) format(“svg”);
}

font-family 为自定义的字体名称，必须；

src 字体文件的引入路径，必须。

其中 Firefox、Chrome、Safari 及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 格式的字体，Internet Explorer 9+ 仅支持 .eot (Embedded OpenType) 类型的字体。在得到设计提供的单字体文件后，通过字体生成工具，生成其它需要的格式，字客网提供了在线生成器：

https://www.fontke.com/tool/fontface

然后通过 font-family: "fontname"; 来使用自定义的字体显示。

转载于:https://www.cnblogs.com/dhui/p/10431498.html