CSS字体

了解如何在CSS中使用字体

在网络诞生之初,您只有少数几种字体可以选择。

值得庆幸的是,今天您可以在页面上加载任何字体。

多年来,CSS在字体方面获得了许多不错的功能。

fontproperty是许多属性的简写:

  • font-family
  • font-weight
  • font-stretch
  • font-style
  • font-size

让我们看一下其中的每个,然后我们将介绍font

然后,我们将讨论如何使用@import或者@font-face,或加载字体样式表。

font-family

设置字体家庭元素将使用的元素。

为什么是“家庭”?因为我们所知道的字体实际上是由几个子字体组成的。提供我们需要的所有样式(粗体,斜体,浅色..)。

这是我的Mac的Font Book应用程序中的一个示例-Fira Code字体家族在下面托管了几种专用字体:

此属性使您可以选择特定的字体,例如:

body {
  font-family: Helvetica;
}

您可以设置多个值,因此如果由于某种原因无法使用第一个选项(例如,在计算机上找不到该选项,或者下载字体的网络连接失败),则将使用第二个选项:

body {
  font-family: Helvetica, Arial;
}

到目前为止,我使用了一些特定的字体,我们称之为Web安全字体,因为它们已预先安装在不同的操作系统上。

我们将它们分为Serif,Sans-Serif和Monospace字体。以下是一些最受欢迎的列表:

衬线-乔治亚-Palatino-时代New Roman-时代

无衬线字体-Arial-Helvetica-Verdana-日内瓦-Tahoma-Lucida Grande-冲击-Trebuchet MS-Arial Black

等宽空间-快递-快递-Lucida控制台-摩纳哥

您可以将所有这些用作font-family属性,但不能保证每个系统都有这些属性。其他人也存在不同程度的支持。

您也可以使用通用名称:

  • sans-serif没有连字的字体
  • serif带连字的字体
  • monospace一种特别适合代码的字体
  • cursive用于模拟手写作品
  • fantasy这个名字说明了一切

这些通常用在font-family定义,以提供后备值,以防其他情况无法应用:

body {
  font-family: Helvetica, Arial, sans-serif;
}

font-weight

此属性设置字体的宽度。您可以使用这些预定义的值:

  • 普通的
  • 大胆的
  • 粗体(相对于父元素)
  • 更轻(相对于父元素)

或使用数字关键字

  • 100
  • 200
  • 300
  • 400,映射到normal
  • 500
  • 600
  • 700映射到bold
  • 800
  • 900

其中100是最浅的字体,而900是最粗体。

其中一些数字值可能不会映射到字体,因为必须在字体系列中提供该值。如果缺少一个,CSS将使该数字至少与前一个数字一样大胆,因此您可能会有指向相同字体的数字。

font-stretch

允许选择字体的窄字体或宽字体(如果有)。

这很重要:字体必须配备不同的字体。

允许的值从窄到宽:

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

font-style

允许您将斜体样式应用于字体:

p {
  font-style: italic;
}

此属性还允许值obliquenormal。使用之间的差异很小,如果有的话italicoblique。第一个对我来说比较容易,因为HTML已经提供了i表示斜体的元素。

font-size

此属性用于确定字体的大小。

您可以传递2种值:

  1. 长度值,例如pxemrem等,或一个百分比
  2. 预定义的值关键字

在第二种情况下,可以使用的值为:

  • xx小
  • 小的
  • 中等的
  • x大
  • xx大
  • 较小(相对于父元素)
  • 更大(相对于父元素)

用法:

p {
  font-size: 20px;
}

li { font-size: medium; }

font-variant

此属性最初用于将文本更改为小写,并且只有3个有效值:

  • normal
  • inherit
  • small-caps

小写大写表示文本以大写字母旁边的“小写大写”呈现。

font

font属性可让您在一个字体中应用不同的字体属性,从而减少了混乱情况。

我们必须至少设置2个属性,font-sizefont-family,其他是可选的:

body {
  font: 20px Helvetica;
}

如果我们添加其他属性,则需要以正确的顺序放置它们。

这是命令:

font: <font-stretch> <font-style> <font-variant> <font-weight> <font-size> <line-height> <font-family>;

例子:

body {
  font: italic bold 20px Helvetica;
}

section { font: small-caps bold 20px Helvetica; }

使用加载自定义字体@font-face

@font-face使您可以添加新的字体系列名称,并将其映射到包含字体的文件。

该字体将由浏览器下载并在页面中使用,这是对网络排版的根本改变-我们现在可以使用所需的任何字体。

我们可以添加@font-face声明直接添加到我们的CSS中,或链接到专用于导入字体的CSS。

在我们的CSS文件中,我们还可以使用@import加载该CSS文件。

一种@font-face声明包含一些我们用来定义字体的属性,包括src,即字体的URI(一个或多个URI)。这遵循同源策略,这意味着只能从当前源(域+端口+协议)下载字体。

字体通常采用以下格式

  • woff(网络开放字体格式)
  • woff2(网络开放字体格式2.0)
  • eot(嵌入式开放式)
  • otf(OpenType字体)
  • ttf(TrueType字体)

如下所示,以下属性使我们能够定义将要加载的字体的属性:

  • font-family
  • font-weight
  • font-style
  • font-stretch

性能说明

当然,加载字体会影响性能,在创建页面设计时必须考虑这些影响。

免费下载我的CSS手册


更多CSS教程: