CSS3：@font-face规则

2021-12-27 18:34:08

前言

过去，Web设计师为了保证网站能够正常显示，只能使用“Web安全字体”，即每台机器都预装的字体。但Web安全字体有时并不好看...

@font-face能够使得任何一台机器能够显示理想中的字体。

字体定义文件

这里我们只要知道有这些格式的字体文件即可，不用背下来。

ttf：True Type Font，Windows里面一般都是这种格式的，【控制面板】->【字体】可以查看系统自带字体。
otf：Open Type Font
eot：Embeded Open Type， IE仅支持该字体。
woff：Web Open Font Format。
svg：基于SVG渲染的字体。

@font-face

定义字体

@font-face {

font-family: <name>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}

<name>：设置自定义字体的名称，使用字体时引用该名称即可。
<source>：定义字体定义文件的路径。
<format>：帮助浏览器识别字体格式。
<weight>和<style>在CSS中已经介绍过。

使用字体

font-family: <name>;

@font-face 规则模板

@font-face {
    font-family: ‘bradley_hand_itcregular‘;
    src: url(‘bradhitc-webfont.eot‘);   /* IE9 Compat Modes */
    src: url(‘bradhitc-webfont.eot?#iefix‘) format(‘embedded-opentype‘),  /* IE6-IE8 */
         url(‘bradhitc-webfont.woff‘) format(‘woff‘),   /* Modern Browsers */
         url(‘bradhitc-webfont.ttf‘) format(‘truetype‘),   /* Safari, Android, iOS */
         url(‘bradhitc-webfont.svg#bradley_hand_itcregular‘) format(‘svg‘);  /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

Google Fonts

虽然CSS3支持自定义字体（将ttf等字体文件放在工程目录下，然后使用@font-face引入），但是目前我比较推荐的方法是使用Google Web Fonts 来使用额外的字体。
Google Web Fonts 可以看做是一个字体数据库，他虽然内部也使用了@font-face 规则定义字体，但是用户不需要直接接触到 @font-face，只需要简单一步即可使用。

比如我们想使用 Open Sans 这个字体，则只需要：

引入：

<link href=‘http://fonts.googleapis.com/css?family=Open+Sans‘ rel=‘stylesheet‘ type=‘text/css‘>

使用：

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

Dafont

主页：http://www.dafont.com/
一个字体库，如果要使用，则你需要下载该文件（ttf格式），并安装或使用@font-face引入。（但一般我们先使用 Font Sqluirrel 转换）

Font Squirrel

地址：http://www.fontsquirrel.com/tools/webfont-generator
字体格式转换工具，解释如下图：

特别注意：下载的rar包中的stylesheet.css里面就已经定义了你的@font-face规则，你可以不用自己写，直接复制黏贴到项目中去。
因此通常的流程：在Dafont.com中下载ttf文件，使用Font Squirrel转换。

CSS3：@font-face规则,布布扣,bubuko.com