font-weight属性值在不同浏览器中展示效果

最新推荐文章于 2023-09-14 14:40:21 发布

原创最新推荐文章于 2023-09-14 14:40:21 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

css 专栏收录该内容

13 篇文章

订阅专栏

本文详细测试了CSS的font-weight属性在谷歌、火狐、QQ、Edge和IE浏览器中的显示效果。从100到900的数值变化显示了字体从细到粗的过渡，发现100-300为细体，400-500为正常体，600-900为粗体。IE浏览器则将100-500视为正常体，600-900视为粗体。

看CSS编码规范的时候看到font-weight属性，突然来了兴趣，想看font-weight的100-900的属性值在不同浏览器中的展示效果，顺便梳理一篇博客出来。

一般认为：font-weight属性值 400 相当于关键字 normal，700等价于bold。

分别测试了谷歌、火狐、QQ、Edge、IE这几个浏览器。

html代码如下，感兴趣自己试一试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>font-weight值在不同浏览器中的显示</title>
</head>
<body>
    <span style="font-weight: 100;">干饭人，干饭魂，干饭人吃饭都用盆</span><br>
    <span style="font-weight: 200;">干饭人，干饭魂，干饭人吃饭都用盆</span><br>
    <span style="font-weight: 300;">干饭人，干饭魂，干饭人吃饭都用盆</span><br>
    <span style="font-weight: 400;">干饭人，干饭魂，干饭人吃饭都用盆</span><br>
    <span style="font-weight: 500;">干饭人，干饭魂，干饭人吃饭都用盆</span><br>
    <span style="font-weight: 600;">干饭人，干饭魂，干饭人吃饭都用盆</span><br>
    <span style="font-weight: 700;">干饭人，干饭魂，干饭人吃饭都用盆</span><br>
    <span style="font-weight: 800;">干饭人，干饭魂，干饭人吃饭都用盆</span><br>
    <span style="font-weight: 900;">干饭人，干饭魂，干饭人吃饭都用盆</span><br>
</body>
</html>
<style>
    span {
        font-size: 30px;
    }
</style>

谷歌浏览器、火狐浏览器、QQ浏览器、Edge浏览器

字体显示分为3个模块：100-300都是细字体，400-500是正常字体，600-900是粗体。