使用CSS3 @font-face实现个性化字体

最新推荐文章于 2025-04-25 12:14:54 发布

wangxiaoangg

最新推荐文章于 2025-04-25 12:14:54 发布

阅读量367

点赞数

分类专栏：前端

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用CSS3中的@font-face属性引入自定义字体，包括不同浏览器下的兼容性解决方案，以及如何利用FontSquirrel网站生成所需的字体文件和CSS代码。

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

在网页中，我们可以用CSS的font-family属性来定义字体，然而定义的字体在用户的电脑上能否正确呈现则要看用户的电脑是否安装了该字体。我们经常能看到国外的一些个人网站使用了非常漂亮的字体，而这些字体通常在用户的电脑中是没有安装的，所以用font-family属性就无法实现了，今天我们就介绍使用@font-face实现个性化字体。

CSS3 @font-face

说@font-face是CSS3的新特性并不准确，因为CSS2就已经支持了这一特性，并且Internet Explorer早在第5版的时候就已经支持它了，不过IE实现方式是通过自有的eot(Embeded Open Type)字体格式，其它浏览器都不支持这个格式。@font-face支持如下属性：

　　font-family：设置文本的字体名称。

　　font-style：设置文本样式。

　　font-variant：设置文本是否大小写。

　　font-weight：设置文本的粗细。

　　font-stretch：设置文本是否横向的拉伸变形。

　　font-size：设置文本字体大小。

　　src：设置自定义字体的相对路径或者绝对路径。

一个简单例子

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
    src: local("☺"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg");
    font-weight: normal;
    font-style: normal;
}

第一个src是兼容IE，第二个src是兼容其它浏览器。local("☺")是一种hack写法，避免从客户端加载字体，这种写法在Android系统中有BUG，感兴趣的同学可见《Best Practice For @Font-Face CSS Takes A Turn》改进方案是声明两个@font-face，如下：

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
}
 
@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url(//:) format("no404"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT") format("svg");
    font-weight: normal;
    font-style: normal;
}

　我们首先声明一个引用eot字体文件的@font-face，以确保它在IE中能正常工作，第二个@font-face引用了多个字体格式是为了兼容其它浏览器，它们将按顺序查找，直到找到支持的格式，这意味着同一个字体需要有多个格式。url(//:) format("no404")是一种Bulletproof写法，感兴趣的同学可见《New @Font-Face Syntax: Simpler, Easier》一文。

　　其它的HTML和CSS代码如下：

 
         .font-face-display {
        
         font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif;
        
         }
        
         <
         div 
         class="font-face-display">Take me to your heart</
         div
         >

　　最重效果如下：

免费字体网站Font Squirrel

　Font Squirrel是一个非常优秀的免费字体资源网站，收集了很多高品质字体供网页设计者免费下载，还有个字体格式生成工具@font-face generator，上传一个字体文件，可以生成多种字体格式及CSS代码，非常有用。如果你需要一些优秀的免费英文字体，这是个好去处。

https://www.fontsquirrel.com/tools/webfont-generator

　　想要丰富多彩的页面就需要有更多的字体样式，人们想出了很多字体替代方案，除了@font-face方案外还有sIFR、Cufon、Typeface.js等，还有.webfont，简单说，.webfont 就是在字体中嵌入了访问许可表，浏览器可以读出这些许可信息，并决定是否应该下载和渲染这些字体。另外还有Typekit也是一种值得关注的方案，将字体放在第三方服务器上供调用。这些方案的优缺点，将会在以后做详细的介绍。