css font-weight原理_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

css font-weight原理_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:43 AM

为什么要记录一下？因为今天我要设置一个字符加粗，然后就用font-weight:200,没有任何效果。现在看来很可笑，400才相当于normal，200怎么加粗，奇怪的是也没有变细。所以得研究一下font-weight的工作原理，以下正文。

一、使用介绍

font-weight设置文本的粗细，文本粗细设置属于一种比较复杂的字体样式定义，之所以说它复杂，是因为字体本身粗细变化千变万化，没有统一标准，对于字体粗细的具体定义也各不相同。

属性值：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 继承值

默认值：normal。

font-weight属性值设置有3种方法：

第一种：关键字法：

关键字有2个，normal【默认值，定义标准的字符】和bold【定义粗体字符】。

第二种：相对粗细值法：

相对粗细也是由关键字定义，有2个，bolder【定义更粗的字符】和lighter【定义更细的字符】，但是它的粗细是相对于上级parent元素的继承值而言的。bolder就是匹配字体集中可用的下一级较粗字体，反之"lighter"也一样，匹配下一级较细字体。它们的参照系都是继承值，因此粗细程度都是相对于继承值而言的。

具体情况参考下图：

第三种：从"100"到"900"的9个数字序列。

这些数字代表从最细(100)到最粗(900)的字体粗细程度。

数值400相当于normal,

数值700相当于bold。

二、举例

代码：Times New Roman效果

<html><head><meta charset="utf-8"/><title>CSS Demo</title><style>body,table,tr,td { font-family: "Times New Roman", Times;font-size: 18pt; }table { border-collapse: collapse; }</style></head><body><table border="1px" cellpadding="5px"><tr><th>关键字</th><th>效果</th></tr><tr style="font-weight: normal;"><td>normal</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: bold;"><td>bold</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: bolder;"><td>bolder</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: lighter;"><td>lighter</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 100;"><td>100</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 200;"><td>200</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 300;"><td>300</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 400;"><td>400</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 500;"><td>500</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 600;"><td>600</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 700;"><td>700</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 800;"><td>800</td><td>The quick brown fox jumps over a lazy dog.</td></tr><tr style="font-weight: 900;"><td>900</td><td>The quick brown fox jumps over a lazy dog.</td></tr></table></body></html>

三、原理

1、相关名称解释

OpenType: 是一种可缩放字体（scalable font）电脑字体类型，采用PostScript格式，是美国微软和Adobe公司联合开发，用来替代TrueType字体的新字体。这类字体的文件扩展名由.otf,.ttf,.ttc，类型代码是OTTO，现行标准为OpenType1.6。

2、工作原理：用户代理怎样决定字体变形的粗细？

字体的粗细被分为9个级别，从100到900，这些数字关键字用于定义与字体的相关特征的映射关系，即字体的粗细被分为九个等级。例如，OpenType就使用了九个值的数字级别。数字直接映射到各个级别，100映射到最轻的字体变形，900映射最重的字体变形。事实上，在这些数字中并不存在本质的字体粗细的约定。css只是强调一点：每个数字对应的字体粗细不得小于它前面的数字所对应的字体粗细。也就是说每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与上一个最大数字一样粗。

这样就出现了上面的问题：100,200,300和400或许都对应同样粗细的字体变形，而500和600可能对应到一个更粗的字体变形，700,800和900则对应另一种更粗的字体变形。

3、关键词和数值对应关系

400和normal等价，700和bold等价，其他数字不对应任何font-weight属性的关键字，但可对应普通的字体变形名。

如果某种字体变形标记为"Normal","Regular","Roman"或"Book"，那么它被分配给400，而且任何被标记为"Medium"的字体变形就对应于500，然而，如果标记为“Medium”的字体变形是唯一可用的字体，那么它就不能同500相对应。

MDN和W3C上给出的对应关系如下：

100Thin (Hairline)，200Extra Light (Ultra Light)，300Light，400Normal，500Medium，600Semi Bold (Demi Bold)，700Bold，800Extra Bold (Ultra Bold)，900Black (Heavy)

4、字体系列少于9时填补缺失的方法

如果某个给定的字体系列少于九个字体粗细基本，则用户代理需要做更多工作。这种情况，使用一种预先定义的方式来填充缺失的空隙。

填补缺失的方法：

可参考font-weight。

500缺失：和400相同。

600|700|800|900任一值缺失：和下一级较粗的值相同。如果没有，则和下一级较细的值相同。

例如：如果一个字体中缺失“500”和“900”，那么该字体的9级粗细值就应该相当于“100、200、300、400、400、600、700、800、800”。

300|200|100中任一值缺失：和下一级较细的值相同。如果没有，则和下一级较粗的值相同。

一张图片，灰色代表没有该值所以用相邻的值。

字体的weight值为400,700和900

字体的weight值为300和600

一般设计者不会在一篇文章中定义超过3级的粗细程度，且设计的时候粗细程度应该有所跳跃，否则反而不能突出加粗的内容。

四、资源链接

百度百科font-weight

http://baike.baidu.com/item/font-weight

w3c font-weight

http://dev.w3.org/csswg/css-fonts-3/#font-weight-prop

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越HTML：网络开发的基本技术Apr 26, 2025 am 12:04 AM

要构建一个功能强大且用户体验良好的网站，仅靠HTML是不够的，还需要以下技术：JavaScript赋予网页动态和交互性，通过操作DOM实现实时变化。CSS负责网页的样式和布局，提升美观度和用户体验。现代框架和库如React、Vue.js和Angular，提高开发效率和代码组织结构。

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。