解決 font-weight 無效的問題

Jrain 發布于2019-08-30 13:15 / 2539人閱讀

摘要：因為不同環境下渲染的差異會導致表現不一致。第二個分組用于已知的系統字體針對和。針對和更高版本的操作系統。在和上，并不是顯而易見的，而是作為隱藏字體存在。至少切入點有了改變，并不是下無效。

近期調頁面時有幾個 font-weight 需要修改，無論怎么調整字體粗細都沒有變化，深入研究后總結下文

初探

本地寫個例子，代碼如下

This is a paragraph

p {
  font-size: 50px;
}
p.thin {
  font-weight: 100;
}
p.normal {
  font-weight: normal;
}
p.thick {
  font-weight: bold;
}

在 Mac OS 下 Chrome、Firefox、Safari 結果分別如下(從左到右)

我的瀏覽器均為最新版本，發現一個簡單的 font-weight 屬性，在三個瀏覽器有三個表現。

Chrome 下所有字重均一樣

Firefox 下表現正常，是我們期待的結果

Safari 下 100 無效，被解析為 normal

解決表現不一致的問題

這種不同瀏覽器表現不同是我們不能接受的，對于后期排錯造成困難，于是我首先想到是字體的惹得貨，修改我的樣式文件

p {
  font-size: 50px;
  font-family: Arial;
}
p.thin {
  font-weight: 100;
}
p.normal {
  font-weight: normal;
}
p.thick {
  font-weight: bold;
}

效果如下

這里的表現倒是一樣的，我們可以忽略圖中字體大小（截屏的誤差導致），只看字體粗細就好，font-weight: 100; 都失效了。

MDN 文檔的解釋

This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

文章開始沒有介紹基本語法，相信前端們都知道，normal 等同于 400， bold 等同于 700。

這也很好的解釋了這個例子的表象，但我瞬間推翻了這句話，因為在例子1中 Firefox 在沒有設置字體的情況下可以正常顯示。

問題根源

到這里相信你已經知道答案了，我們要針對不同瀏覽器和運行環境進行全面配置 font-family 屬性，全局的字體建議放在 body 選擇器下。

p {
  font-size: 50px;
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}
p.thin {
  font-weight: 100;
}
p.normal {
  font-weight: normal;
}
p.thick {
  font-weight: bold;
}

看下三個瀏覽器的表現

在字體和字重上達到了完全一致，仔細的觀察會發現，Chrome 與 Safari 渲染不同字重的字體總寬度變化明顯，而 Firefox 下則不是十分明顯

溫馨提示：盡量不要用字體去撐容器的寬度，盡量避免 hover 改變字重。因為不同環境下渲染的差異會導致表現不一致。

上面給的一大串字體又代表兼容那些環境和設備哪？

首先我們分成三組來解釋

font-family:
/* 1 */ -apple-system, BlinkMacSystemFont,
/* 2 */ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
/* 3 */ "Helvetica Neue", sans-serif;

1.第一個分組是映射到系統 UI 字體的 CSS 屬性。這涵蓋了很多環境，并且不會將這些字體誤認為別的字體

-apple-system 在 Mac OS X 和 iOS 上的 Safari 中設置 San Francisco，并在舊版本的 Mac OS X 上設置成 Neue Helvetica 和 Lucida Grande。它根據字體大小正確選擇 San Francisco Text 和 San Francisco Display。

BlinkMacSystemFont 只針對于 Mac OS X 上的 Chrome。

2.第二個分組用于已知的系統 UI 字體

Segoe UI 針對 Windows 和 Windows Phone。

Roboto 針對 Android 和更高版本的 Chrome 操作系統。故意列出在 Segoe UI 后，因為如果你是 Windows 上的 Android 開發人員，并安裝 Roboto，將使用 Segoe UI。

Oxygen 針對 KDE，Ubuntu，你可以猜到，Cantarell 針對 GNOME。這一開始感到徒勞，因為一些 Linux 發行版有許多這樣的字體。

Fira Sans 針對 Firefox OS 系統。

Droid Sans 針對舊版本系統的安卓

請注意，我們不需要添加 San Francisco。在 iOS 和 Mac OS X 上，San Francisco 并不是顯而易見的，而是作為“隱藏”字體存在。我們也不使用 .SFNSText-Regular，在 Mac OS X 上的 San Francisco 的內部 PostScript 名稱來指定 San Francisco。它只適用于 Chrome，并且不如 BlinkMacSystemFont 通用。

3.第三個分組是我們的后備字體

Helvetica Neue 針對舊 El Capitan 版本的 Mac OS X。它被列在接近結尾，因為它是一個流行的字體在其他非 El Capitan 計算機上。

sans-serif 默認的是 sans-serif 后備字體。

以下是目前已知的的問題：

在 Mac OS X 的 Firefox 中，San Francisco 的字母間距比 Safari 和 Chrome 更緊。

它不會使 Lucida Grande 在 Mac OS X 的 pre-Yosemite 版本上降級到 Neue Helvetica。并且它可能不匹配不太受歡迎的操作系統上的正確字體或更復雜的配置。

說到這里上面都是英文的字體，我們需要針對中文設置字體，可以針對不同操作系統給中文字體。

總結

對于字體的統一展示，目前為止還沒有完善的解決辦法，只能針對不同設備給出對應的解決方案，至于為什么不引入外部的三方字庫來統一字體呢？因為會增加網頁的請求時長，渲染也會耗時，盡量避免三方字庫。下次再有類似字重渲染誤差問題可以先從字體下手，整個例子沒有跑過 Windows 系統，可能在 Windows 下還會有問題。至少切入點有了改變，并不是 Chrome 下 font-weight 無效。

文章出自 orange 的 個人博客 http://orangexc.xyz/

GPU云服務器云服務器解決問題的方法云計算解決的問題短視頻問題的解決措施數據分析解決的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115417.html

移動端兼容問題總結(2)

摘要：發布于上使用等相對變量單位后，為橢圓描述根據網上解決方案設置為具體值即可。在移動端兼容問題解決如果有其他解決方案，請不吝賜教。發布于: https://luoyangfu.com/article... android 上使用 em,rem 等相對變量單位后，border-radius: 50% 為橢圓描述showImg(https://cdn-cos.luoyangfu.com/...

qpwoeiru96 2019-08-02 15:29 評論0 收藏0
移動端兼容問題總結(2)

摘要：發布于上使用等相對變量單位后，為橢圓描述根據網上解決方案設置為具體值即可。在移動端兼容問題解決如果有其他解決方案，請不吝賜教。發布于: https://luoyangfu.com/article... android 上使用 em,rem 等相對變量單位后，border-radius: 50% 為橢圓描述showImg(https://cdn-cos.luoyangfu.com/...

XanaHopper 2019-08-30 11:23 評論0 收藏0
移動端兼容問題總結(3)

摘要：發布于蒙層點擊滾動穿透問題描述移動端浮層內部滾動的時候，會導致浮層覆蓋的下面內容也會滾動解決方式蒙層出現的時候，給底部被覆蓋的滾動容器并設置。發布于：https://www.luoyangfu.com/art... 蒙層點擊滾動穿透問題描述: 移動端浮層內部滾動的時候，會導致浮層覆蓋的下面內容也會滾動解決方式:蒙層出現的時候，給底部被覆蓋的滾動容器 position: fixe...

Pink 2019-08-02 15:38 評論0 收藏0
移動端兼容問題總結(3)

摘要：發布于蒙層點擊滾動穿透問題描述移動端浮層內部滾動的時候，會導致浮層覆蓋的下面內容也會滾動解決方式蒙層出現的時候，給底部被覆蓋的滾動容器并設置。發布于：https://www.luoyangfu.com/art... 蒙層點擊滾動穿透問題描述: 移動端浮層內部滾動的時候，會導致浮層覆蓋的下面內容也會滾動解決方式:蒙層出現的時候，給底部被覆蓋的滾動容器 position: fixe...

siberiawolf 2019-08-30 15:44 評論0 收藏0
學習Vue.js-Day1

摘要：學習內容，基本語法和概念，打包工具，實戰操作參考文獻官網官方資料庫全家桶全家桶文檔概念前端框架借助可以實現手機開發前端框架是一套構造用戶界面的框架，只關于視圖層前端的主要工作室跟用戶界面打交道，中的，實現界面效果框架是為了提高開發學習內容 1，Vue基本語法和概念 2，打包工具 Webpack , Gulp3，實戰操作參考文獻：官網： https://cn.vuejs.org...

Cheriselalala 2019-08-29 16:34 評論0 收藏0