首頁 > web前端 > css教學 > Firefox的'大膽”默認值是可變字體的問題

Firefox的'大膽”默認值是可變字體的問題

Lisa Kudrow
發布: 2025-03-20 10:31:11
原創
673 人瀏覽過

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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板