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)
1710 0
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
2天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
3天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
7天前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。
|
25天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
2月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
2月前
|
前端开发 JavaScript
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!