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天前赞一波!
相关文章
- 使用 HTML、CSS 和 JavaScript 的实时计算器
- CSS 中的变量
- CSS overflow 内容溢出时的显示方式
- CSS 控制内容显示行数
- 玩转 CSS Flexbox 弹性布局
- VSCode 自定义字体、连字效果
- 禁止添加属性、封闭对象、冻结对象的 API
- flex 弹性布局常用属性
- 初识: 对象的属性特征
- CSS实现文字环绕图片和文字两端对齐
- CSS 边框属性总结
- position:sticky纯css实现粘性定位让元素滚到顶部固定
- Vue2 计算属性 computed【初识】
- css linear-gradient实现背景渐变色
- css页面内容不够高footer始终位于页面底部
- HTML-CSS-JS Prettify 代码格式化插件
- 网页内容很少时让footer处于最下方
- css改变progress进度条颜色
- Layui 扩展字体图标
- Layui 字体图标
文章评论
评论问答