CSS设计指南笔记：@font-face 规则的使用

最新推荐文章于 2024-06-17 12:02:58 发布

材女的进击

最新推荐文章于 2024-06-17 12:02:58 发布

阅读量250

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_39987434/article/details/88236823

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

设定Web 字体的方式有以下三种。
 使用Google Web Fonts 或Adobe 的Typekit 等公共字体库。
 使用事先打好包的@font-face 包。
 使用Font Squirrel 用你自己的字体生成@font-face 包。

公共字体库

Google Web Fonts 的使用步骤。打开http://www.google.com/webfonts，找到想要的字体，单击Add to Collection 按钮，然后单击页面底部的Use 按钮。然后，Google 就会生成一个指向你刚刚选定字体的<link>标签，直接把它复制粘贴到你的HTML 文件中即可。

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

把这个链接添加到页面的<head>标签中之后，就可以像使用其他字体一样使用这些Web 字体了。用户打开网页时，浏览器就会从Google 的服务器得到相应字体。

font-family: 'Open Sans', sans-serif;

打包的@font-face包

Font Squirrel（http://www.fontsquirrel.com）提供了很多现成的字体包，每个字体包中都包含所有必要格式的字体和为每款浏览器提供正确格式的CSS 代码。Font Squirrel还有一个转换程序，能够把你上传的字体转换成字体包。

生成@font-face包

有时候，你可能希望在自己的网页中使用一种特殊字体，比如客户自己公司指定了一种字体，必须用在网站和设计中。今天，只要你获得了把该字体转换为Web 字体使用的授权（请查看许可协议或联系字体设计商），就可以使用Font Squirrel 的转换程序（http://www.fontsquirrel.com/fontface/generator）把它转换成@font-face 字体包。只要简单几步，几分钟时间，就可以得到一个能放到你自己Web 服务器上供下载的@font-face 字体包。