免费教程
除了前面介绍的背景外,字体设置也是网页设计中的重要组成部分,合适的字体不仅会使页面更加美观,也可以提升用户体验。
Web前端教程
Web前端入门教程:CSS字体样式(1)
来源:易牛云朗沃
  |  
发布时间:2021-10-11 18:28
  |  
关键词:成都Web前端培训
  |  
阅读量:

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

font-family:设置字体;

font-style:设置字体的风格,例如倾斜、斜体等;

font-weight:设置字体粗细;

font-size:设置字体尺寸;

font-variant:将小写字母转换为小型大写字母;

font-stretch:对字体进行伸缩变形(使用较少,并且主流浏览器都不支持);

font:字体属性的缩写,可以在一个声明中设置多个字体属性。

1. font-family

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

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

成都Web前端培训

下表中列举了一些常用的字体族(generic-family):

成都Web前端培训

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

成都Web前端培训

运行结果如下图所示:

成都Web前端培训

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

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

2. font-style

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

成都Web前端培训

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

成都Web前端培训

运行结果如下图所示:

成都Web前端培训

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

3. font-weight

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

成都Web前端培训

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

成都Web前端培训

运行结果如下图所示:

成都Web前端培训

点击知道更多编程知识

文章来源于网络