字体设置是网页设计中的重要组成部分，合适的字体不仅会使页面更加美观，也可以提升用户体验。css 中提供了一系列用于设置文本字体样式的属性，比如更改字体，控制字体大小和粗细等等。

【推荐学习：css视频教程】

css font字体属性

1、font-family

font-family 属性用来设置元素内文本的字体。由于字体的种类成千上万，而且有些还不是免费的，因此我们的电脑上几乎不可能拥有所有的字体。为了最大程度的保证我们设置的字体能够正常显示，可以通过 font-family 属性定义一个由若干字体名称组成的列表，字体名称之间使用逗号,分隔，浏览器会首先尝试列表中的第一个字体，如果不支持则尝试下一个，以此类推。

font-family 属性的可选值如下：

立即学习“前端免费学习笔记（深入）”；

下表中列举了一些常用的字体族（generic-family）：

【示例】使用 font-family 属性为 HTML 元素设置字体样式：

    
    


    
font-family 属性

运行结果如下图所示：

注意：如果字体族或字体名称中包含空格或多个单词，则必须将它们使用引号包裹起来，例如"Times New Roman"、"Courier New"、"Segoe UI" 等，如果是在元素的 style 属性中使用则必须使用单引号。

在网页设计中最常用的字体族是 serif 和 sans-serif，因为它们适合阅读。在显示一些程序代码是通常使用等宽字体，这样可以使用程序代码看起来更加工整。

2、font-style

font-style 属性用来设置字体的样式，例如斜体、倾斜等，该属性的可选值如下：

【示例】使用 font-style 属性设置字体的样式：

    
    


    
normal：显示一个标准的字体
    
italic：显示一个斜体的字体
    
oblique：显示一个倾斜的字体
    
inherit：从父元素继承字体样式

运行结果如下图所示：

乍看之下，您可能觉得 italic 和 oblique 的效果是一样的。其实不然，italic 显示的字体的斜体版本，而 oblique 则只是一个倾斜的普通字体。

3、font-weight

font-weight 属性能够设置字体的粗细，可选值如下：

【示例】使用 font-weight 属性设置字体粗细：

    
    


    
font-weight: 100;
    
font-weight: 200;
    
font-weight: normal;
    
font-weight: bold;
    
font-weight: bolder;

运行结果如下图所示：

4、font-size

font-size 属性用来设置字体的大小（字号），可选值如下：

【示例】使用 font-size 属性设置字体的大小：

    
    


    
将字体大小设置为：xx-small
    
将字体大小设置为：x-small
    
将字体大小设置为：x-small
    
将字体大小设置为：medium
  
    
将字体大小设置为：large
   
    
将字体大小设置为：x-large
   
    
将字体大小设置为：xx-large
   
    
将字体大小设置为：smaller
   
    
将字体大小设置为：larger
    
将字体大小设置为 20 像素
 

运行结果如下图所示：

5、font-variant

font-variant 属性可以将文本中的小写英文字母转换为小型大写字母（转换后的大写字母与转换前小写字母的大小相仿，所以称之为小型大写字母）。font-variant 属性的可选值如下：

【示例】使用 font-variant 属性设置小型大写字母：

    
    


    
This is a paragraph
    
This is a paragraph

运行结果如下图所示：

6、font

font 属性与前面价绍的 background 属性的功能类似，通过 font 属性可以同时设置多个字体属性，不同的是，使用 font 属性需要遵循以下顺序：

font：[[font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar

在使用 font 属性时，有以下几点需要注意：

• 使用 font 属性时必须按照如上所示的顺序，并且 font-size 和 font-family 两个属性不可忽略；

• font 属性中的每个参数仅允许设置一个值，除 font-size 和 font-family 属性外，被忽略的属性将被设置为各自的默认值；

• 若要定义 line-height 属性，则需要使用斜线/将 font-size 和 line-height 属性分开。

【示例】使用 font 属性同时定义多个字体效果：

    
    


    
使用 font 属性需要遵循以下顺序：
    
font：[[font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar

运行结果如下图所示：

7、@font-face

以前在给网页文字设置一些好看的字体时，限于用户系统是否安装此字体，而只能使用三种方法解决，要么用通用字体，要么用图片替换文本，要么用Flash。而这几种方法却存在严重的缺陷。

现在好了，@font-face终于解决了这种使用网络字体的问题。

@font-face 用于从远程服务器或者用户本地加载指定的字体。

浏览器兼容性问题

其实，@font-face并不是CSS3才出来的属性，早在1998年它就在CSS2中使用了，但是在CSS2.1中又被除去了，CSS3又把它加了进来。

@font-face语法

@font-face {
    font-family: <字体名>;
    src: <字体路径> [<格式>][,<字体路径> [<格式>]]*;
    [font-weight: <粗细>];
    [font-style: <样式>];
}

取值说明：

• 字体名：此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:”字体名”;”

• 字体路径：此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

• 格式：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

• weight和style：这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

@font-face小例子

Lecepin's Blog 

效果：

代码块中，font-family和src是必需的。src中的local()表是从本地系统查找字体，如果找不到，再从url()指定的查找。

format()指的是字体的格式，常用字体格式如下：

src format属性兼容写法

关于兼容各个浏览器的兼容写法，可以参考一下一个国外大神Paul Irish写的兼容代码：

Voicenotes

Voicenotes是一款简单直观的多功能AI语音笔记工具

下载

   @font-face {
    font-family: '字体名';
    src: url('字体名.eot'); /* IE9 兼容模式 */
    src: url('字体名.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('字体名.woff') format('woff'), /* 现代浏览器 */
             url('字体名.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('字体名.svg#grablau') format('svg'); /* Legacy iOS */
   }

通常来说，有.woff和eot这两种就够了。

关于这个兼容写法，请参考：Bulletproof @font-face Syntax

字体格式转换工具

当你只有一种字体格式文件的时候，可以使用如下在线格式转换工具，生成其它格式字体文件：

Font Squirrel：https://www.fontsquirrel.com/tools/webfont-generator

@font-face generator：http://fontface.codeandmore.com/

Google Fonts：https://fonts.google.com/

8、font-size-adjust

CSS 中的 font-size-adjust 属性允许开发者基于小写字母的高度指定 font-size-adjust ，这可以有效地提高网页文字的可读性。

在这里，你不仅能了解到 font-size 属性的重要性，并且还能学会如何在你的项目中使用它。

font-size-adjust 的重要性

你访问的网站大多都是由文本组成的，由于书面文字是网站的重要组成部分，因此就很值得把注意力放到你用来显示信息的字体上面。选对正确的字体能带给用户愉快的阅读体验，然而，使用不恰当的字体则会使网站变得难以阅读。当你决定将要使用什么字体后，一般你就会再给这个字体选择一个合适的大小。

font-size-adjust　属性会设置网页中所有 font-size 下你想使用的字体的大小，然而在大多数情况下，浏览器一般都是使用 font-family 下声明的第一种字体。只有当第一种字体因为某些原因不可用时，浏览器才会使用候选字体继续渲染页面。

举个例子，看下面的代码：

body {
  font-family: 'Lato', Verdana, sans-serif;
}

如果你的浏览器从 Google Fonts 下载的 ‘Lato’ 字体不可用时，在这种情况下，Verdana 字体就会被使用。但是，脑海里 font-family 的值好像是针对 ‘Lato’ 字体设定的，而不是 Verdana。

什么是字体的纵横比？

字体的外观尺寸及其可读性可能会因为 font-size 的值而产生很大的变化，特别像是对拉丁文这种文字会导致其在大小写之间差别巨大。在这种情况下，小写字母与对应的大写字母的高度比例是决定一种字体易读性的重要因素，这个比值通常被叫做一种字体的纵横比。

正如我之前说的，一旦你设置了 font-size 的值，这个值将会对所有的字体起作用。如果候选字体的纵横比跟首选字体的纵横比相差太大，这可能影响候选字体的易读性。

font-size 属性在这种情形下则扮演着一个尤为重要的角色，因为它允许你设置所有字体的 x 轴高度 为统一大小，以便提高文字的易读性。

给 font-size-adjust 属性选择合适的值

现在你知道使用 font-size-adjust 属性的重要性了吧，是时候把它用到你的网站上了。这个属性的语法如下：

font-size-adjust: none | 

font-size-adjust 是默认值，这个值意味着不调整字体的大小。

你也可以设置属性的值为一个数字，这个数字将用来计算一张网页上所有字体的 x 轴高度，x 轴高度等于这个数字乘以 none 的值。 这可以提高小尺寸字体的可读性。以下是一个使用 font-size 属性的例子：

font-size: 20px;font-size-adjust: 0.6;

所有字体的 x 轴高度现在是 20px * 0.6 = 12px，一种字体的实际大小现在可以被修改以确保 x 轴高度总是等于 12px。调整后 font-size-adjust 的值可以通过以下公式计算

c = ( a / a' ) s.

这里， font-size 指调整后的 c，font-size 指原先指定的 s，a 是 font-size 属性指定的纵横比，font-size-adjust 指实际字体的纵横比。

你不能设置 a' 的值为负数，设置为 0 则会致使文字没有高度，换句话说，就是文字会被隐藏。在旧的浏览器中，例如 Firefox 40，如果设置其属性值为 0 则相当于设置为 font-size-adjust。

大多数情况下，开发者一般会尝试不同的 none 取值以确定哪个值对给定的字体最好看。这意味着在理想情况下，他们希望所有字体的 x 轴高度与首选字体的 x 轴高度相等。换句话说，最合适的 font-size 取值就是你首选字体的纵横比。

如何计算一种字体的纵横比

要确定一种字体合适的纵横比，你可以凭实际经验就是调整后的字体大小应该跟原来声明的字体大小一样。这就是说上面公式中的 font-size-adjust 应该跟 a 相等。

计算纵横比的第一步是先创建 2 个 a' 元素，每个 元素将会包含一个字母和一个包围着字母的边框（因为我们要进行比较，所以每个 中的字母都必须相同）。同时，每个元素的 属性值都应该相同，但只有一个元素会使用 font-size 属性。当 font-size-adjust 的值等于给定字体的纵横比时，每个 font-size-adjust 下的字母都是一样的大小。

在下面的 demo 中，我创建了一个边框围绕着字母 ‘t’ 和 ‘b’ 并且对每组字母应用了不同的 属性值。

以下是相关代码：

.adjusted-a {
  font-size-adjust: 0.4;
}

.adjusted-b {
  font-size-adjust: 0.495;
}

.adjusted-c {
  font-size-adjust: 0.6;
}

正如下面 demo 所示，font-size-adjust 的值越大则字母会显得越大，反之则越小，当该值等于纵横比时，每组字母的尺寸都相等。

演示地址：https://codepen.io/SitePoint/pen/YxxbMp

在网站上使用 font-size-adjust

以下 demo 使用的 font-size-adjust 取值于上一个 CodePen demo 中为 ‘Lato’ 字体设置的值，现在将会用来调整 ‘Verdana’ 这个候选字体。会有一个按钮控制修改是否发生，所以你可以看出修改前后的变化：

演示地址：https://codepen.io/SitePoint/pen/KvvLOr

当你处理大量文字时效果会更加引人注目，然而上面的例子应该足够让你认识到这个属性的有用之处。

浏览器支持

目前，只有 Firefox 默认支持 font-size-adjust 属性。Chrome 和 Opera 分别从 43 和 30 版本开始作为试验特性予以支持，开发者需前往 chrome://flags 中开启 “Experimental Web Platform Features” 选项。Edge 和 Safari 不支持这个属性。

如果你决定使用这个属性，低版本浏览器的支持将不成问题，这个属性被设计时就已经考虑到向后兼容性，不支持的浏览器会正常的显示文本，支持的浏览器则会基于该属性的值调整字体大小。

9、font-stretch

font-stretch属性用来将字体在水平方向上进行拉伸或压缩，让一种字体的字符更宽或更窄。如果水平压缩，则字体变窄，如果水平拉伸，则字体变宽。

语法格式：

font-stretch: wider|narrower|ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|inherit;

就像 font-size 属性的预定义关键字（如xx-large）一样，该属性也有一系列预定义关键字，这些关键字可以是normal、或condensed、或expanded，默认值为 normal，表示不进行拉伸或压缩。

示例：

/* Keyword values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;

该属性不会通过伸缩缩小任意字体的几何形状。像font-size-adjust。如果它提供了其中的几个，这仅仅是一种选择最合适的字体的方式, 。

注意：如果字体提供了多个面，font-variant则选择与该属性值最匹配的那个面。例如，在OS X上，除了更为常见的Bold，Regular，Italic和BoldItalic外，“Helvetica Neue”字体还提供了第二组缩放的缩略字体：缩写。浏览器支持font-stretch将使用压缩的值ultra-condensed，以font-stretch及用于其它正常表面（normal和所有展开的值）。

如果字体没有浓缩或扩展，如Mac OS上的默认“Times New Roman”，semi-condensed则不会有任何可见的效果，因为在所有情况下都将使用唯一合适的。

（学习视频分享：web前端入门）