雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

CSS font-family 属性设置字体

2024-09-28 10

1. 前言


font-family 属性用于给元素指定字体,是开发中使用非常频繁的一个属性

该属性的值是一个字体系列,每个值使用逗号隔开,如果字体名名称包含空格,那么字体名称必须使用引号包裹,设置的字体是否可用取决于用户机器上该字体是否可用

2. 给英文,中文设置不同的字体


众所周知,font-family 属性的原则是客户端不支持前面的字体时,自动往后查找可以使用的字体

如果想要给英文,中文设置不同的字体,可以使用一个仅支持的英文的字体(比如: Arial),再找一个支持中文的字体

如下所示: 遇到文字时,首选会尝试使用 Arial 字体,该字体支持英文,所以遇到英文会生效,遇到中文时 Arial 不支持,将自动使用后面的 Noto Sans SC(思源黑体) 字体

:root {    font-family: Arial, 'Noto Sans SC';}

3. 思源黑体


通过 link 标签在网页头部引用 Google Web Font

字体: Noto Sans SC

大小: 100,300,400,500,700,900

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">

在需要使用思源黑体的地方使用 CSS 设置字体

font-family: 'Noto Sans SC';
更新于:5天前
赞一波!

文章评论

评论问答