首页 > web前端 > css教程 > Firefox的'大胆”默认值是可变字体的问题

Firefox的'大胆”默认值是可变字体的问题

Lisa Kudrow
发布: 2025-03-20 10:31:11
原创
666 人浏览过

Firefox的大胆”默认值是可变字体的问题

可变字体简化了单个文件的不同字体样式的创建。但是,当前的浏览器渲染<strong></strong><b></b>元素提出了与可变字体提供的广泛字体重量值所面临的兼容性挑战。

默认字体重量中的浏览器差异

<strong></strong><b></b>元素突出显示文本。浏览器通过增加字体重量来实现这一目标。这一般效果很好。例如,MDN Web文档使用<strong></strong>在“发现问题?”中部分。

这个问题是由自定义字体重量引起的。默认值为400, font-weight接受1到1000的值。Chromeand Firefox渲染<strong></strong>根据周围文本的字体重量不同。

Chrome和Safari始终使用700个字体重量,而Firefox则根据上下文使用400、700或900。

差异的来源

Chrome和Firefox在其用户代理样式中采用不同的font-weight值:

 <code>/* Chrome and Safari */ strong, b { font-weight: bold; } /* Firefox */ strong, b { font-weight: bolder; }</code>
登录后复制

bold等于700,而bolder是相对的。但是,HTML标准建议bolder (自2012年以来),目前仅此后仅是Firefox。流行的样式表归一化解决了这一不一致。

评估默认值

Firefox的默认值与标准保持一致。但是它是优越的吗?这两个默认值都有缺陷:Chrome的bold失败在较高的字体重量下(约700),而Firefox的bolder斗争则具有较低的重量(约300)。

在Firefox最坏的情况下,<strong></strong>文字几乎看不见。下图展示了Firefox中字体重量为349的文本。你能在里面发现这个词吗<strong></strong>标签? Firefox以400的速度使其仅增加51分。

结论

当使用350个字体重量以下的薄或可变字体时,<strong></strong><b></b>可能对Firefox不明显。建议为这些元素手动设置font-weight以避免依靠浏览器的次优默认值。

 <code>/* Example: Defining regular and bold font-weights */ body { font-weight: 340; } b, strong { font-weight: 620; }</code>
登录后复制

大胆bolder字体是有问题的。理想情况下,无论文本的重量如何,都应轻松地看到强调的文本。优先选择一致的字体权重增加(例如,百分比)。 CSS工作组正在讨论基于百分比的font-weight值,如Lea Verou的建议:

 <code>/* Proposed percentage-based font-weight */ strong, b { font-weight: 150%; }</code>
登录后复制

比当前的bold / bolder方法的可变字体增加150%可能是更好的默认值。

以上是Firefox的'大胆”默认值是可变字体的问题的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板