CSS font-weight

简介: CSS font-weight

概述


font-weight CSS 属性指定了字体的粗细程度。 一些字体只提供 normal 和 bold 两种值


normal

正常粗细。与400等值。

bold

加粗。 与700等值。

lighter

比从父元素继承来的值更细(处在字体可行的粗细值范围内)。

bolder

比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。

一个介于 1 和 1000 (包含) 之间的 类型值。更大的数值代表字体重量粗于更小的数值 (或一样粗)。一些常用的数值对应于通用的字体重量名称,如章节常见粗细值名称和数值对应所描述。

相对粗细值的解析


当指定的是相对粗细值 lighter 或 bolder 时,将使用如下图表来决定元素渲染时的绝对粗细值:

继承值(Inherited value) bolder lighter
100 100 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

常见粗细值名称和数值对应


(function() {
var dict, randomAtoZ, randomWord, randomWordLength, word_history, wordfreq, writeWord;
dict = [];
$.get('/uploads/150101/dict-eng.txt', function(txt) {
var i, words;
words = txt.split('\n');
i = 0;
while (i < words.length) {
dict.push(words[i]);
i++;
}
writeWord(randomWord());
});
randomAtoZ = function(lookup) {
return function() {
var chance, char, charfreq, prev, random;
random = Math.random() * 100000;
char = void 0;
prev = 0;
for (char in lookup) {
charfreq = lookup[char];
chance = (charfreq - prev) / 1000 + '%';
if (random < charfreq) {
return {
char: char,
charfreq: charfreq,
chance: chance
};
100 到 900 之间的数值大致对应如下的常见粗细值名称:
100
Thin (Hairline)
200
Extra Light (Ultra Light)
300
Light
400
Normal
500
Medium
600
Semi Bold (Demi Bold)
700
Bold
800
Extra Bold (Ultra Bold)
900
Black (Heavy)
相关文章
|
前端开发
CSS font-weight 值对应(Regular、Normal、Medium、Light)
CSS font-weight 值对应(Regular、Normal、Medium、Light)
1662 0
|
29天前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
|
29天前
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
11天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
29天前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
29天前
|
前端开发 JavaScript
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
|
29天前
HTML+CSS 实现带轮播图的企业官网页面(记得收藏)
HTML+CSS 实现带轮播图的企业官网页面(记得收藏)
|
29天前
HTML+CSS 星空闪烁登录页面(记得收藏)
HTML+CSS 星空闪烁登录页面(记得收藏)
|
29天前
|
前端开发
html+css 实现产品小米产品展示效果(记得收藏)
html+css 实现产品小米产品展示效果(记得收藏)