css - 字体

耳东蜗牛
2,062 阅读8分钟

这是我参与更文挑战的第15天，活动详情查看： 更文挑战

工作比较忙，为了不断更，只能发以前的了。

通用字体系列

Serif字体

字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则称为字体是成比例的。例如：小写的i和m的宽度就不同。上下短线指的是每个字符笔画末端的装饰，如大写两条腿底部的短线。包括Times\Georgia\New century Schoolbook。

sans-serif字体

字体成比例，且没有上下短线(无衬线字体)，包括Helvetica\Geneva\Verdana\Arial\Univers

Monospace字体

字体不成比例，等宽字体，包括Courier\Courier New\Andale Mono

Cursive字体

手写体，包括Zapf Chancery\Author\Comic Sans

Fantasy字体

无法归类的字体，包括Western\Woodblock\Klingon

请看示例：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            html {
                width: 100%;
                height: 100%;
                font-size: 20px;
            }
 
            div {
                margin: 20px;
                background-color: gray;
            }
 
            .serif {
                font-family: "Times";
                
            }
 
            .sans-serif {
                font-family: "Arial";
            }
 
            .Monospace {
                font-family: "Courier";
            }
 
            .Cursive {
                font-family: "Comic Sans";
            }
 
            .Fantasy {
                font-family: "Western";
            }
        </style>
    </head>  
    <body>  
        <div class='serif'>serif字体: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
        <div class='sans-serif'>sans-serif字体: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
        <div class='Monospace'>Monospace字体: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
        <div class='Cursive'>Cursive字体: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
        <div class='Fantasy'>Fantasy字体: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
    </body>  
</html>

image.png
这里只介绍CSS 字体
serif字体，可以看到字母A是具有上下短线的，而且字母i和m的宽度不等，所以字体成比例。

​

使用字体

font-family：[ <family-name> | <generic-family> ] #
  • = arial | georgia | verdana | helvetica | simsun and etc.
  • = cursive | fantasy | monospace | serif | sans-serif
  • 如果多个字体，则会首先匹配第一个字体。识别不到，才会识别第二个
  • 字体为多个单词，则需要用引号将单词包含起来
  • 如果只想使用某一个通用字体，但是不关心具体的字体名称，可以直接使用通用字体名称，如serif
    ​

中文字体

字体中文名 字体英文名
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft Yahei
微软正黑体 Microsoft JhengHei
楷体 KaiTi
新宋体 NSimSun
仿宋 FangSong
更多详情访问文章
​

字体加粗

font-weight：normal | bold | bolder | lighter | <integer>

取值：

  • normal：正常的字体。相当于数字值400
  • bold：粗体。相当于数字值700。
  • bolder：定义比继承值更重的值
  • lighter：定义比继承值更轻的值
  • <integer>：用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

​

解释bolder

首先我们会得到从父元素继承而来的font-weight。当子元素设置成bolder的时候。会有一种规则(测试而来)：如下，

  • 100 | 200 | 300 -> normal (400)
  • normal (400) | 500 | 600 -> bold (700)
  • bold (700) | 800 | x > 900 -> 900 ​
  • 当父元素的font-weight为100 | 200 | 300，子元素的bolder都会跳到400。
  • 当父元素的font-weight为normal (400) | 500 | 600，子元素的bolder都会跳到bold (700)。
  • 当父元素的font-weight为bold (700) | 800 | x > 900，子元素的bolder都会跳到900。
.parent1 {
    font-weight: normal; /*400*/
}
 
.child1 {
    font-weight: bolder; /*700*/
}
 
 
.parent2 {
    font-weight: normal; /*100*/
}
 
.child2 {
    font-weight: bolder; /*400*/
}
 
 
.parent3 {
    font-weight: normal; /*700*/
}
 
.child3 {
    font-weight: bolder; /*900*/
}

image.png

解释lighter

首先我们会得到从父元素继承而来的font-weight。当子元素设置成lighter的时候。会有一种规则(测试而来)：如下

  • 500 | 400 | 300 | 200 | 100 -> 100
  • 700 | 600 -> normal (400)
  • 900 | 800 -> bold (700)
  • x > 900 -> (chorme: 400), (IE, firefox : 100)

​

字体大小

font-size：<absolute-size> | <relative-size> | <length> | <percentage>
  • <absolute-size>= xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size>= smaller | larger
<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            html {
                width: 100%;
                height: 100%;
            }
 
            .xx-small {
                font-size: xx-small;
            }
 
            .x-small {
                font-size: x-small;
            }
 
            .small {
                font-size: small;
            }
 
            .medium  {
                font-size: medium ;
            }
 
            .large  {
                font-size: large ;
            }
 
            .x-large {
                font-size: x-large;
            }
 
            .xx-large {
                font-size: xx-large;
            }
        </style>
    </head>  
    <body>  
        <div>
            normal text
        </div>
        <div class="xx-small">
            xx-small text
        </div>
        <div class="x-small">
            x-small text
        </div>
        <div class="small">
            small text
        </div>
        <div class="medium">
            medium text
        </div>
        <div class="large">
            large text
        </div>
        <div class="x-large">
            xlarge text
        </div>
        <div class="xx-large">
            xx-large text
        </div>
    </body>  
</html>


测试结果：

​

测试larger

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            html {
                width: 100%;
                height: 100%;
            }
 
            .child {
                font-size: larger;
            }
 
            .xx-small {
                font-size: xx-small;
            }
 
            .x-small {
                font-size: x-small;
            }
 
            .small {
                font-size: small;
            }
 
            .medium  {
                font-size: medium ;
            }
 
            .large  {
                font-size: large ;
            }
 
            .x-large {
                font-size: x-large;
            }
 
            .xx-large {
                font-size: xx-large;
            }
 
        </style>
    </head>  
    <body>  
        <div class="xx-small">
            <div class="child">
                xx-small parent
            </div>
        </div>
        <div class="x-small">
            <div class="child">
                x-small parent
            </div>
        </div>
        <div class="small">
            <div class="child">
                small parent
            </div>
        </div>
        <div class="medium">
            <div class="child">
                medium parent
            </div>
        </div>
        <div class="large">
           <div class="child">
                large parent
            </div>
        </div>
        <div class="x-large">
            <div class="child">
                x-large parent
            </div>
        </div>
        <div class="xx-large">
            <div class="child">
                xx-large parent
            </div>
        </div>
    </body>  
</html>

image.png

​

测试smaller

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            html {
                width: 100%;
                height: 100%;
            }
 
            .child {
                font-size: smaller;
            }
 
            .xx-small {
                font-size: xx-small;
            }
 
            .x-small {
                font-size: x-small;
            }
 
            .small {
                font-size: small;
            }
 
            .medium  {
                font-size: medium ;
            }
 
            .large  {
                font-size: large ;
            }
 
            .x-large {
                font-size: x-large;
            }
 
            .xx-large {
                font-size: xx-large;
            }
 
        </style>
    </head>  
    <body>  
        <div class="xx-small">
            <div class="child">
                xx-small parent
            </div>
        </div>
        <div class="x-small">
            <div class="child">
                x-small parent
            </div>
        </div>
        <div class="small">
            <div class="child">
                small parent
            </div>
        </div>
        <div class="medium">
            <div class="child">
                medium parent
            </div>
        </div>
        <div class="large">
           <div class="child">
                large parent
            </div>
        </div>
        <div class="x-large">
            <div class="child">
                x-large parent
            </div>
        </div>
        <div class="xx-large">
            <div class="child">
                xx-large parent
            </div>
        </div>
    </body>  
</html>


​

字体风格

  • normal：指定文本字体样式为正常的字体
  • italic：指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
  • oblique：指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字
.italic {
    font-style: italic;
}
 
.oblique {
    font-style: oblique;
}

​

字体变形

font-variant：normal | small-caps
  • normal：正常的字体
  • small-caps：小型的大写字母字体，如果文本源中出现大写字母，则会显示正常的大写字母
<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css">
            .normal {
                font-variant: normal;
            }
 
            .small-caps {
                font-variant: small-caps;
            }
        </style>
    </head>  
    <body>  
        <div class="normal">
            NORMAL 文字
        </div>
 
        <div class="small-caps">
            LARGE WORDS small-caps 文字
        </div>
    </body>  
</html>

image.pngimage.png
​
​

字体拉伸和调整（了解，几乎所有的浏览器不支持）

字体拉伸

font-stretch：normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
  • normal：正常文字宽度
  • ultra-condensed：比正常文字宽度窄4个基数。
  • extra-condensed：比正常文字宽度窄3个基数。
  • condensed：比正常文字宽度窄2个基数。
  • semi-condensed：比正常文字宽度窄1个基数。
  • semi-expanded：比正常文字宽度宽1个基数。
  • expanded：比正常文字宽度宽2个基数。
  • extra-expanded：比正常文字宽度宽3个基数。
  • ultra-expanded：比正常文字宽度宽4个基数。

​

字体调整

font-size-adjust：none | <number>
  • none：不保留首选字体的 x-height
  • <number>定义字体的 aspect 值**

​

复合属性font

font：[ [ <' font-style '> || <' font-variant '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ]? <' font-family '> ] | caption | icon | menu | message-box | small-caption | status-bar
  • <' font-style '>：指定文本字体样式
  • <' font-variant '>：指定文本是否为小型的大写字母
  • <' font-weight '>：指定文本字体的粗细
  • <' font-size '>：指定文本字体尺寸
  • <' line-height '>：指定文本字体的行高
  • <' font-family '>：指定文本使用某个字体或字体序列
  • caption：使用有标题的系统控件的文本字体（如按钮，菜单等）（CSS2）
  • icon：使用图标标签的字体（CSS2）
  • menu：使用菜单的字体（CSS2）
  • message-box：使用信息对话框的文本字体（CSS2）
  • small-caption：使用小控件的字体（CSS2）
  • status-bar：使用窗口状态栏的字体（CSS2）

​

@font-face

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体。

当找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。字体是在 CSS3 @font-face 规则中定义的。但是如果我们下载的字体太大，会存在性能问题，不过好在现在的字体服务商给的文件都不大。

@font-face {
    font-family: <YourWebFontName>;
    src: <source> [<format>][,<source> [<format>]]*;
    [font-weight: <weight>];
    [font-style: <style>];
    [unicode-range： <unicode-range>];
}
  • YourWebFontName：指的就是自定义的字体名称，最好是使用你下载的默认字体，它将被引用到你的Web元素中的font-family。如“font-family:”字体名”;”
  • Source：指的是自定义的字体的存放路径，可以是相对路径也可以是绝路径；
  • Format：指的是自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
  • weight和style: weight定义字体是否为粗体，style主要定义字体样式，如斜体。
  • unicode-range: 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

​

(1) 使用font-face自定义字体

@font-face {
    font-family: YourWebFontName;
    src: url(../font/test.eot);
    src: url(../font/test.eot?#iefix) format("embedded-opentype"),
         url(../font/test.woff) format("woff"), 
         url(../font/test.ttf) format("truetype"),
         url(../font/test.svg#jq) format("svg");
}

​

(2) 声明字体来源

@font-face规则中有一个非常重要的参数，就是src。其值主要是用于连接到实际的字体文件。此外，可以声明多个来源，如果浏览器未能找到第一个来源，他回一次寸照下面的字体来源。
上面声明了四中字体：EOT, WOFF, TTF和SVG。

  • TureTpe(.ttf)格式
    .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
  • OpenType(.otf)格式
    .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
  • Web Open Font Format(.woff)格式
    .woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
  • **Embedded Open Type(.eot)格式 **
    .eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；
  • **SVG(.svg)格式 **
    .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

​

(3) 创建各种字体

这里以国内的网站有字库为例。

然后得到对应的font-face代码：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css">
            @font-face {
                font-family: 'ChannelSlanted2';
                src: url('http://cdn.webfont.youziku.com/webfonts/nomal/118923/45817/5b0d6df4f629d91b10cd3bc2.gif?r=76000373532');
                src: url('http://cdn.webfont.youziku.com/webfonts/nomal/118923/45817/5b0d6df4f629d91b10cd3bc2.gif?r=76000373532?#iefix') format('embedded-opentype'),
                     url('http://cdn.webfont.youziku.com/webfonts/nomal/118923/45817/5b0d6df4f629d91b10cd3bc2.png?r=76000373532') format('woff2'),
                     url('http://cdn.webfont.youziku.com/webfonts/nomal/118923/45817/5b0d6df4f629d91b10cd3bc2.bmp?r=76000373532') format('woff');
                font-weight: normal;
                font-style: normal;
            }
 
            .ChannelSlanted2 {
                font-family: "ChannelSlanted2"
            }
        </style>
    </head>  
    <body>  
        <div class="ChannelSlanted2">
            LARGE WORDS small-caps 文字
        </div>
    </body>  
</html>

然后得到我们的图字效果。
image.png
还可以到网站（www.fontsquirrel.com/）去下载一些字体的格式。然后如果我们的到只是其中一种格式的话，因为前面给出的网站下载的都是.otf格式，所以我们还需要转换成其他格式。可以使用下面的网站进行格式转换。

​

(4) 延伸：@font-face使用本地字符

@font-face 规则中的src 描述符还可以接受local()函数，用于指定本地字体的名称。当不需要用到任何外部的Web 字体，就可以直接在字体队列中指定一款本地字体：

@font-face {
	font-family: Ampersand;
	src: local('Baskerville'),
	local('Goudy Old Style'),
	local('Garamond'),
	local('Palatino');
}

举例：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            @font-face {
                font-family: Ampersand;
                src: local('Comic Sans MS');
            }
 
            .icon {
                font-family: Ampersand
            }
        </style>
    </head>  
    <body>  
        <div class="icon">
            HTML & CSS
        </div>
    </body>  
</html>

image.png

​

(5) 延伸：unicode-range控制字体应用范围

当我们想要控制字符应用的范围，需要一个描述符来声明我们想用这几款本地字体来显示哪些字符。

unicode-range 描述符只在@font-face 规则内部生效（因此这里用了描述符这个术语；它并不是一个CSS 属性），它可以把字体作用的字符范围限制在一个子集内。它对本地字体和远程字体都是有效

这个unicode-range 在实践中非常实用，但在语法上却非常晦涩。它的语法是基于“Unicode 码位”的，而不是基于字符的字面形态。

例如：我们想是上面的示例中HTML & CSS中的&应用字体，其他的不变化。

1) 在控制台执行下面代码得到十六进制码位

"&".charCodeAt(0).toString(16); // 返回26

2) 形成unicode-range代码

需要在码位前面加上U+ 作为前缀

unicode-range: U+26;

*如果你想指定一个字符区间，还是要加上U+ 前缀，比如U+400-4FF。实际上对于这个区间来说，你还可以使用通配符，以这样的方式来写：U+4??。同时指定多个字符或多个区间也是允许的，把它们用逗号隔开即可，比如U+26, U+4??, U+2665-2670。

3) 修改代码如下

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            @font-face {
                font-family: Ampersand;
                src: local('Comic Sans MS');
                unicode-range: U+26; 
            }
 
            .icon {
                font-family: Ampersand
            }
        </style>
    </head>  
    <body>  
        <div class="icon">
            HTML & CSS
        </div>
    </body>  
</html>

然后我们看一下现在的样式以及和之前的样式对比（红色的是带有unicode-range的html，可以看到当前只有&还是和之前相同，其他的不在应用Ampersand字体）：
image.png

avatar
文章
阅读
粉丝