在设计网页时,正确选择字体风格是十分重要的。字体不仅能够给用户带来视觉享受,还能够影响网站的整体风格。在这方面,CSS提供了许多字体样式选项,其中font families CSS是最基本的之一。本文将从多个方面笼统介绍font families CSS的使用技巧。
一、字体风格的分类
在利用font families CSS来设置字体风格前,需要先了解字体风格的分类。
最简单的方式就是将字体分为衬线字体和无衬线字体。衬线字体指的是相对粗细、往外突出的部分,比如宋体、黑体、楷体等;无衬线字体则指的是无论在哪个部分都是一样的粗细的字体风格,比如微软雅黑、Arial、Helvetica等等。
此外,还有手写字体、艺术字体等各种不同的字体风格。
二、使用系统默认字体族
当用户没有选择字体时,CSS会默认使用浏览器中的默认字体族。不同浏览器的默认字体族有所不同,
font-family属性可让你设置字体族,其中第一个字体名失效,会尝试下一个字体名,直到找到一个可以使用的字体为止。
body { font-family: Arial, Helvetica, sans-serif; }
此处设置了字体族为Arial,如果这款字体不在用户电脑上,浏览器会尝试用Helvetica,如果还是不行,浏览器将会表现无衬线字体族。
三、使用Google Fonts
对于大多数网页设计师来说,使用Google Fonts库是最常见的选择,这使得所有的字体都在同一服务器上,可以大幅提高打开网站的速度。
首先,你需要在Google Fonts上选定目标产品的字体。当你选定字体之后,Google Fonts会提供链接和CSS样式供你使用。
在你要使用的每个字体的引入宣告中,链接关系应包含在标签中作为外部文件来读取文本文件。像这样:
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
你也可以一次选入多个字体:
<link href='https://fonts.googleapis.com/css?family=Open+Sans|Roboto' rel='stylesheet'>
接下来,在CSS文本文件中插入以下文本,以设置字体:
body { font-family: 'Open Sans', monospace; }
在CSS文件的末尾处使用的monospace是一个后备字体,如果Open Sans无法使用,就会使用monospace。
四、在字体组中使用具体的字体族
通过使用字体组,可以在浏览器中提供更多的选择。字体组由一组备用字体族指标组成,因此如果不可用,字体亲属可以转向另一种字体。
字体族名与字体族之间用逗号分隔。而在名字中带有空格的字体族必须被引号固定。
body { font-family: "Times New Roman", Times, serif; }
你可以将任何数量的字体族名添加到列表中,允许浏览器从中选择一个可以用的字体族。
五、总结
以上是几个提升网页字体风格的技巧,可以提高用户使用体验、色彩搭配和美观程度。在CSS中选择正确的font families,可以让网站字体更美观、更吸引人,从而提高网站的整体质量和用户使用体验。