1. 犀牛前端部落首页
  2. CSS教程

CSS 字体

这篇文章,俺将跟大家一起,学习如何使用CSS中的字体。

在网络诞生之初,你只能选择少数几种字体。

幸运的是,我们没有活在之前那个年代,QAQ,现在你可以在你的页面上加载任何类型的字体。

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

字体属性是一些属性的简写:

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

让我们逐个看看然后我们会讲到字体。

然后,我们将讨论如何使用@import或@font-face或通过加载字体样式表来加载自定义字体。

font-family

设置元素将使用的字体。

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

下面是一个来自我Mac的字体书应用程序的例子——Fira Code字体家族下面有几个专用字体:

CSS 字体

这个属性让你选择一个特定的字体,例如:

body {
  font-family: Helvetica;
}

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

body {
  font-family: Helvetica, Arial;
}

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

我们将它们分为 Serif, Sans-Serif, and Monospace字体。

Serif – Georgia – Palatino – Times New Roman – Times

Sans-Serif – Arial – Helvetica – Verdana – Geneva – Tahoma – Lucida Grande – Impact – Trebuchet MS – Arial Black

Monospace – Courier New – Courier – Lucida Console – Monaco

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

你也可以使用通用名称:

无衬线字体:一种没有连接的字体

衬线字体:一种有连接的字体

monospace是一种特别适合代码的字体

草书用来模拟手写的作品

这个名字说明了一切

  • sans-serif
  • serif
  • monospace 
  • cursive 
  • fantasy

这些通常用于一个字体家族定义的结尾,在没有其他应用的情况下提供一个回退值:

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

font-weight

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

  • normal
  • bold
  • bolder (相对于父元素)
  • lighter ( 相对于父元素 )

或者使用数值

  • 100
  • 200
  • 300
  • 400, 对应 normal
  • 500
  • 600
  • 700 对应 bold
  • 800
  • 900

其中100是最轻的字体,900是最醒目的。

其中一些数值可能不会映射到字体,因为必须在font family中提供。当缺少一个数字时,CSS会使该数字至少与前一个数字一样粗体,因此可能会有指向相同字体的数字。

font-stretch

允许选择字体的窄面或宽面,如果可用的话。

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

允许的值,从窄到宽:

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

font-style

允许您应用斜体样式的字体:

p {
  font-style: italic;
}

这个属性还允许设置为oblique和normal。

font-size

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

你可以传递两种值:

  • 长度值,如px, em, rem等,或百分比
  • 预定义值关键字

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

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • smaller (相对于父元素)
  • larger (相对于父元素)

使用:

p {
  font-size: 20px;
}

li {
  font-size: medium;
}

font-variant

这个属性最初用于将文本更改为小大写,它只有3个有效值:

  • normal
  • inherit
  • small-caps

小写字母意味着文本在大写字母旁边以“小写字母”呈现。

font

字体属性允许您在单个字体中应用不同的字体属性,从而减少混乱。

我们必须至少设置2个属性,font-size和font-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;
}

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4595.html

发表评论

登录后才能评论