真正了解@font face里font-weight的作用
详细了解@font-face使用规则可以去看张鑫旭的文章真正了解CSS3背景下的@font face规则
我们这里只重点强调@font-face
里font-weight
,font-style
的用法,因为我在使用@font-face
时对这一块的使用根本不清楚,感觉网上好多人忽略了这个非常重要的地方。
@font face规则支持的CSS属性如下
@font-face {font-family: 'example';src: url(example.ttf);font-style: normal;font-weight: normal;unicode-range: U+0025-00FF;font-variant: small-caps;font-stretch: expanded;font-feature-settings:"liga1" on;
}
我们常用的字体是下面这些
@font-face {font-family: 'example';src: url(example.ttf);font-style: normal;font-weight: normal;unicode-range: U+0025-00FF;
}
font-weight
和font-style
类似,不过是定义了不同字重使用不同字体,对于中午而言,这个要比font-style
适用性强很多。我这里就有一个非常具有代表性的例子,版权字体“汉仪旗黑”自重非常丰富,但是这个字体不像“思源黑体”,天然可以根据font-weight属性值加载对应的字体文件,怎么办呢?很简单,使用@font face规则重新定义一下即可,例如下面的CSS代码:
@font-face {font-family: 'QH';font-weight: 400;src: local('HYQihei 40S');
}
@font-face {font-family: 'QH';font-weight: 500;src: local('HYQihei 50S');
}
@font-face {font-family: 'QH';font-weight: 600;src: local('HYQihei 60S');
}
解读一下就是,是一个全新的字体,名为’QH’,当字重font-weight
为400的时候,使用“汉仪旗黑 40S”字重字体,为500的时候,使用“汉仪旗黑 50S”字重字体,为600的时候,使用“汉仪旗黑 60S”字重字体。
于是乎,当我们应用如下的CSS和HTML代码的时候:
.hy-40s,
.hy-50s,
.hy-60s {font-family: 'QH';
}
.hy-40s {font-weight: 400;
}
.hy-50s {font-weight: 500;
}
.hy-60s {font-weight: 600;
}
<ul><li class="hy-40s">汉仪旗黑40s</li><li class="hy-50s">汉仪旗黑50s</li><li class="hy-60s">汉仪旗黑60s</li>
</ul>
我们就可以看到,文字粗细错落有致的效果,如下截图:
如果用在网页开发中,必定会让我们的界面更加的细腻,设计更加的精致,视觉更加的愉悦。
从张鑫旭给出的这里例子我们不难看出,如果我们前端开发拿到的设计图,使用同一种的字体不同粗细的话,例如GoogleSans-Regular
和GoogleSans-Medium
,我们没有必要定义两种字体@font-face:GoogleSans-Regular'
,和@font-face:GoogleSans-Medium
,因为这样会很麻烦。而我们可以直接通过下面这种方式:
@font-face {font-family:'Google Sans';src:url(../font/GoogleSans-regular.ttf);font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}
@font-face {font-family:'Google Sans';src:url(../font/GoogleSans-medium.ttf);font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
使用的时候只需要通过font-weight的值就可以确定使用哪种字体文件的字体了,比如如果字体设置了font-weight:400
是使用的是GoogleSans-regular.ttf这个文件的地体,如果font-weight:500
使用的是GoogleSans-medium.ttf这个文件的字体。
我们只需要按照下面这个规则来设置font-weight 即可。
字体粗细:‘font-weight’属性
名称: font-weight
取值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始: normal
适用于: 所有元素
继承: 是
百分比: (不适用)
媒介: 视觉
计算值: 详见描述
动画: -
‘font-weight’属性执行字体中字形的重量,这取决于黑度等级或笔划粗细。
其值的意义如下:
100至900
这些有序排列中的每个值,表示至少与其起身拥有相同黑度的重量。其大致符合下列通用重量名称:
100 - Thin
200 - Extra Light (Ultra Light)
300 - Light
400 - Regular (Normal、Book、Roman)
500 - Medium
600 - Semi Bold (Demi Bold)
700 - Bold
800 - Extra Bold (Ultra Bold)
900 - Black (Heavy)normal、regular与'400'相同。
bold与'700'相同。
bolder指定外观的重量大于继承的值。
lighter 指定外观的重量小于继承的值。
真正了解@font face里font-weight的作用相关推荐
- self.font = core.getfont(font, size, index, encoding, layout_engine=layout_engine) OSError: cannot o
词云图问题 python处理中文文本数据时,常常用到jieba和wordcloud包. 当画词云图时 代码: from PIL import Image import numpy as np from ...
- 成功解决OSError: cannot open resource self.font = core.getfont(font, size, index, encoding, layout_engin
成功解决OSError: cannot open resource self.font = core.getfont(font, size, index, encoding, layout_engin ...
- “font/woff“ and “font/woff2“ in file “mime.types“
参考 Description The content type for .woff files is specified as "application/font-woff" in ...
- [partial] C#里partial关键字的作用
[partial] C#里partial关键字的作用 1. 什么是局部类型? C# 2.0 引入了局部类型的概念.局部类型允许我们将一个类.结构或接口分成几个部分,分别实现在几个不同的.cs文件中. ...
- Ajax里的onreadystatechange的作用
Ajax里的onreadystatechange的作用 2009-03-15 文章来源: 浏览次数: 3302 发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕 ...
- HTML 文件里开头 Doctype 的作用是什么?
HTML 文件里开头 Doctype 的作用 : (1) 声明位于文档中的最前面的位置,处于标签之前. (2) 此标签可告知浏 览器文档使用哪种 HTML 或 XHTML 规范. 重点:告诉浏览器 ...
- 详解C盘Windows文件夹里重要文件的作用
详解C盘Windows文件夹里重要文件的作用 在整个Windows操作系统中,最重要的莫过于"Windows"文件夹,对电脑进行任何操作几乎都有关.了解这里对于掌握整个系统的运作有 ...
- python库作用_python 里 certifi 库的作用
python 里 certifi 库的作用 安装了certifi之后,和requests库一样也有一个cacert.pem,可以用编辑器打开cacert.pem,里面包含了很多可信任知名公司的证书/公 ...
- css font html里写,HTML,CSS,font
宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 Ming ...
最新文章
- spring cloud快速搭建
- 一些数字:全球企业的人工智能应用进展
- php try 中 抛出异常处理,php中try catch捕获异常实例详解
- ISA Server***检测及配置
- SD功能增强业务说明书
- 数字效率Evernote超效率数字笔记术
- [JMX一步步来] 9、基于JBoss来写MBean
- 李楠宣布离职!“魅族三剑客”时代已逝去,前老板的回应却有点扎心
- strcat第二个参数变吗_您能解决这3个(看似)简单的Python问题吗?
- webpack vs gulp 一张图说明
- 清除浏览器缓存(js、css等)
- 每日英语:Etiquette Catches On in China, Even in Government
- unix 创建html文件路径,Btrfs 创建目录和文件的操作
- 【微信退款】Java实现微信APP退款和JSAPI退款流程
- 收费软件推广模式探索1
- python -m的那些实用功能
- kingcms php 排序 标签,kingcms全部标签使用教程
- 电气器件系列二十五:电子式压力传感器PPG-D(2)
- EEE模式的3DES安全性分析
- Win7蓝屏代码0X0000007B可能是SATA mode问题
热门文章
- c#语言猜数字游戏,C#实现猜数字游戏
- Golang(二十八)[map-底层数据结构]
- oracle vm 鼠标切换,VirtualBox的Linux虚拟机文本模式和图形模式的切换问题
- 决策树与XGBOOST
- Python 一个漂亮的音乐节奏可视化方案
- 【C++】由于找不到xxx.dll,无法继续执行代码,重新安装程序可能会解决此问题。(解决办法)
- html 文本 标签
- 配置apache支持django
- java如何给字符串每三位分隔逗号
- 左眼跳或右眼跳吉凶对照表(必读)