成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

解決 font-weight 無效的問題

Jrain / 2562人閱讀

摘要：因?yàn)椴煌h(huán)境下渲染的差異會(huì)導(dǎo)致表現(xiàn)不一致。第二個(gè)分組用于已知的系統(tǒng)字體針對(duì)和。針對(duì)和更高版本的操作系統(tǒng)。在和上，并不是顯而易見的，而是作為隱藏字體存在。至少切入點(diǎn)有了改變，并不是下無效。

近期調(diào)頁面時(shí)有幾個(gè) font-weight 需要修改，無論怎么調(diào)整字體粗細(xì)都沒有變化，深入研究后總結(jié)下文

初探

本地寫個(gè)例子，代碼如下

This is a paragraph


This is a paragraph


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 結(jié)果分別如下(從左到右)

我的瀏覽器均為最新版本，發(fā)現(xiàn)一個(gè)簡(jiǎn)單的 font-weight 屬性，在三個(gè)瀏覽器有三個(gè)表現(xiàn)。

Chrome 下所有字重均一樣

Firefox 下表現(xiàn)正常，是我們期待的結(jié)果

Safari 下 100 無效，被解析為 normal

解決表現(xiàn)不一致的問題

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

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

效果如下

這里的表現(xiàn)倒是一樣的，我們可以忽略圖中字體大小（截屏的誤差導(dǎo)致），只看字體粗細(xì)就好，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。

這也很好的解釋了這個(gè)例子的表象，但我瞬間推翻了這句話，因?yàn)樵诶?中 Firefox 在沒有設(shè)置字體的情況下可以正常顯示。

問題根源

到這里相信你已經(jīng)知道答案了，我們要針對(duì)不同瀏覽器和運(yùn)行環(huán)境進(jìn)行全面配置 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;
}

看下三個(gè)瀏覽器的表現(xiàn)

在字體和字重上達(dá)到了完全一致，仔細(xì)的觀察會(huì)發(fā)現(xiàn)，Chrome 與 Safari 渲染不同字重的字體總寬度變化明顯，而 Firefox 下則不是十分明顯

溫馨提示：盡量不要用字體去撐容器的寬度，盡量避免 hover 改變字重。因?yàn)椴煌h(huán)境下渲染的差異會(huì)導(dǎo)致表現(xiàn)不一致。

上面給的一大串字體又代表兼容那些環(huán)境和設(shè)備哪？

首先我們分成三組來解釋

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

1.第一個(gè)分組是映射到系統(tǒng) UI 字體的 CSS 屬性。這涵蓋了很多環(huán)境，并且不會(huì)將這些字體誤認(rèn)為別的字體

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

BlinkMacSystemFont 只針對(duì)于 Mac OS X 上的 Chrome。

2.第二個(gè)分組用于已知的系統(tǒng) UI 字體

Segoe UI 針對(duì) Windows 和 Windows Phone。

Roboto 針對(duì) Android 和更高版本的 Chrome 操作系統(tǒng)。故意列出在 Segoe UI 后，因?yàn)槿绻闶?Windows 上的 Android 開發(fā)人員，并安裝 Roboto，將使用 Segoe UI。

Oxygen 針對(duì) KDE，Ubuntu，你可以猜到，Cantarell 針對(duì) GNOME。這一開始感到徒勞，因?yàn)橐恍?Linux 發(fā)行版有許多這樣的字體。

Fira Sans 針對(duì) Firefox OS 系統(tǒng)。

Droid Sans 針對(duì)舊版本系統(tǒng)的安卓

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

3.第三個(gè)分組是我們的后備字體

Helvetica Neue 針對(duì)舊 El Capitan 版本的 Mac OS X。它被列在接近結(jié)尾，因?yàn)樗且粋€(gè)流行的字體在其他非 El Capitan 計(jì)算機(jī)上。

sans-serif 默認(rèn)的是 sans-serif 后備字體。

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

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

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

說到這里上面都是英文的字體，我們需要針對(duì)中文設(shè)置字體，可以針對(duì)不同操作系統(tǒng)給中文字體。

總結(jié)

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115417.html

相關(guān)文章

  • 移動(dòng)端兼容問題總結(jié)(2)

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

    qpwoeiru96 評(píng)論0 收藏0

  • 移動(dòng)端兼容問題總結(jié)(2)

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

    XanaHopper 評(píng)論0 收藏0

  • 移動(dòng)端兼容問題總結(jié)(3)

    摘要：發(fā)布于蒙層點(diǎn)擊滾動(dòng)穿透問題描述移動(dòng)端浮層內(nèi)部滾動(dòng)的時(shí)候，會(huì)導(dǎo)致浮層覆蓋的下面內(nèi)容也會(huì)滾動(dòng)解決方式蒙層出現(xiàn)的時(shí)候，給底部被覆蓋的滾動(dòng)容器并設(shè)置。 發(fā)布于：https://www.luoyangfu.com/art... 蒙層點(diǎn)擊滾動(dòng)穿透問題 描述: 移動(dòng)端浮層內(nèi)部滾動(dòng)的時(shí)候，會(huì)導(dǎo)致浮層覆蓋的下面內(nèi)容也會(huì)滾動(dòng) 解決方式:蒙層出現(xiàn)的時(shí)候，給底部被覆蓋的滾動(dòng)容器 position: fixe...

    Pink 評(píng)論0 收藏0

  • 移動(dòng)端兼容問題總結(jié)(3)

    摘要：發(fā)布于蒙層點(diǎn)擊滾動(dòng)穿透問題描述移動(dòng)端浮層內(nèi)部滾動(dòng)的時(shí)候，會(huì)導(dǎo)致浮層覆蓋的下面內(nèi)容也會(huì)滾動(dòng)解決方式蒙層出現(xiàn)的時(shí)候，給底部被覆蓋的滾動(dòng)容器并設(shè)置。 發(fā)布于：https://www.luoyangfu.com/art... 蒙層點(diǎn)擊滾動(dòng)穿透問題 描述: 移動(dòng)端浮層內(nèi)部滾動(dòng)的時(shí)候，會(huì)導(dǎo)致浮層覆蓋的下面內(nèi)容也會(huì)滾動(dòng) 解決方式:蒙層出現(xiàn)的時(shí)候，給底部被覆蓋的滾動(dòng)容器 position: fixe...

    siberiawolf 評(píng)論0 收藏0

  • 學(xué)習(xí)Vue.js-Day1

    摘要：學(xué)習(xí)內(nèi)容，基本語法和概念，打包工具，實(shí)戰(zhàn)操作參考文獻(xiàn)官網(wǎng)官方資料庫(kù)全家桶全家桶文檔概念前端框架借助可以實(shí)現(xiàn)手機(jī)開發(fā)前端框架是一套構(gòu)造用戶界面的框架，只關(guān)于視圖層前端的主要工作室跟用戶界面打交道，中的，實(shí)現(xiàn)界面效果框架是為了提高開發(fā) 學(xué)習(xí)內(nèi)容 1，Vue基本語法和概念 2， 打包工具 Webpack , Gulp3，實(shí)戰(zhàn)操作 參考文獻(xiàn)：官網(wǎng)： https://cn.vuejs.org...

    Cheriselalala 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<