CSS Fonts(字体) - 技术栈

CSS字体属性允许您为字体设置各种样式，例如文本的字体系列，大小和粗体，变体等。在CSS样式为文本内容的字体，如提供几个属性：font-family，font-style，font-variant，font-weight和font-size。下一节将逐一介绍这些属性。

字体系列

该font-familyCSS属性允许您设置文本内容的字体系列名称，字体使用的优先级列表。

该font-family属性可以包含多个字体名称作为后备字体。首先列出您想要的字体，然后列出所有字体（如果不可用）。如果浏览器不支持第一种字体，他将尝试下一种字体。字体系列声明可能如下所示：

css 复制代码

p {
    font-family: "Times New Roman", Times, serif;
}

注：如果字体系列的名称超过一个单词，它必须用引号引起来，像"Times New Roman"，"Courier New"，"Trebuchet MS"等等。

了解有关常用字体组合的更多信息；请检查网络安全字体。

字体样式

通过font-style属性设置元素的文本内容的字体样式。

此属性的可能值为：normal，italic或oblique。

css 复制代码

p.one {
    font-style: normal;
}
p.two {
    font-style: italic;
}
p.three {
    font-style: oblique;
}

注意： 乍看之下，斜式和斜体样式看起来是一样的，但是有所不同。该italic样式使用的斜体版本 的字体，而oblique在另一方面文本仅仅是一个倾斜的版本正常的字体。

使用关键字设置字体大小

通过在body元素上设置关键字字体大小，可以在页面上其他任何地方设置相对字体大小，从而可以轻松地在整个页面上相应地缩放字体。使用以下关键字之一指定一个绝对的大小：xx-small，x-small，small，medium，large，x-large，xx-large。

相对尺寸是使用以下关键字之一指定的：smaller、larger。

css 复制代码

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

用像素设置字体大小

当需要像素精度时，以像素值（例如12px，16px等）设置字体大小是一个不错的选择。但是，结果可能会因浏览器而有所不同，因为它们使用不同的算法来实现类似的效果。

css 复制代码

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

可以通过定义以像素为单位的字体大小，但是这种方式不是很灵活，因为用户无法通过浏览器设置更改字体大小。例如，视力不佳的用户可能希望将字体大小设置为大于您指定的大小。因此，如果要创建包含设计，则应避免将像素值用于字体大小。 提示： 可以使用缩放工具在所有浏览器中调整文本大小。但是，此功能将调整整个页面的大小，而不仅仅是文本。

用Em设置字体大小

em单位是指父元素的字体大小。

em值的大小是动态的。定义font-size属性时，an em等于应用于元素父级的字体的大小。

如果font-size在body元素上设置a 为20px，则1em=20px和2em=40px。

如果您没有在页面上的任何地方设置字体大小，则它是浏览器的默认值，是16px。因此，默认为1em=16px和2em=32px。

css 复制代码

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

警告： IE6和IE7放大了大小调整后的文本的大小。（在发布之前最后进行测试）。

使用百分比和Em的组合

在所有浏览器中实现类似效果的解决方案是font-size为body元素设置默认的百分比。一种流行的技术是font-size将body的设置为62.5%（即默认16px的62.5％），等于10px或0.625em。

现在，您可以设置font-size通过将使用em单位的任何元素，具有易于记忆的转换，px通过10值通过这种方式10px=1em，12px=1.2em，14px=1.4em，16px=1.6em，等。请参阅以下示例：

css 复制代码

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.6em;    /* 1.6em = 16px */
}

提示： 在万维网联盟（W3C）建议使用EM或百分比（％）值，以创造更强大的，可扩展的布局。

字体粗细

font-weight属性指定字体的粗细或粗体。

font-style属性的可能值是：normal，bold，bolder，lighter，100，200，300，400，500，600，700，800，900和inherit。

数值100- 900指定字体粗细，其中每个数字表示比其前身暗的粗细。400与normal＆700相同bold。
的bolder和lighter，而其他的值是绝对字体权值是相对于继承字体粗细。

css 复制代码

p {
    font-weight: bold;
}

由于大多数字体只能以有限的重量使用。通常，它们仅以普通和粗体显示。如果字体在指定的重量中不可用，则将选择一个代替字体，它是最接近的可用重量。

css 复制代码

p {
    font-variant: small-caps;
}

引用

菜鸟教程