国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

解決 font-weight 無效的問題

Jrain / 2495人閱讀

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

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

初探

本地寫個例子，代碼如下

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)一個簡單的 font-weight 屬性，在三個瀏覽器有三個表現(xiàn)。

Chrome 下所有字重均一樣

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

Safari 下 100 無效，被解析為 normal

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

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

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。

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

問題根源

到這里相信你已經(jīng)知道答案了，我們要針對不同瀏覽器和運行環(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;
}

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

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

溫馨提示：盡量不要用字體去撐容器的寬度，盡量避免 hover 改變字重。因為不同環(huán)境下渲染的差異會導(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.第一個分組是映射到系統(tǒng) UI 字體的 CSS 屬性。這涵蓋了很多環(huán)境，并且不會將這些字體誤認(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 只針對于 Mac OS X 上的 Chrome。

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

Segoe UI 針對 Windows 和 Windows Phone。

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115417.html

相關(guān)文章

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

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

    qpwoeiru96 評論0 收藏0

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

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

    XanaHopper 評論0 收藏0

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

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

    Pink 評論0 收藏0

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

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

    siberiawolf 評論0 收藏0

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

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

    Cheriselalala 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<