您現在的位置: 365建站網 > 365學習 > CSS中 font-weight 屬性用法及font-weight 無效的原因

CSS中 font-weight 屬性用法及font-weight 無效的原因

文章來源:365jz.com     點擊數:12608    更新時間:2017-12-15 10:42   參與評論
設置三個段落的字體的粗細:

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

注釋:任何的版本的 Internet Explorer (包括 IE8)都不支持屬性值 "inherit"。
定義和用法
font-weight 屬性設置文本的粗細。
說明
該屬性用于設置顯示元素的文本中所用的字體加粗。數字值 400 相當于 關鍵字 normal,700 等價于 bold。每個數字值對應的字體加粗必須至少與下一個最小數字一樣細,而且至少與下一個最大數字一樣粗。
默認值: normal
繼承性: yes
版本: CSS1
JavaScript 語法: object.style.fontWeight="900"

可能的值

描述
normal 默認值。定義標準的字符。
bold 定義粗體字符。
bolder 定義更粗的字符。
lighter 定義更細的字符。
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
定義由粗到細的字符。400 等同于 normal,而 700 等同于 bold。
inherit 規定應該從父元素繼承字體的粗細。

解決 font-weight 無效的問題



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

初探

本地寫個例子,代碼如下

<p class="thin">This is a paragraph</p>
<p class="normal">This is a paragraph</p>
<p class="thick">This is a paragraph</p>
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 后備字體。

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

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

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

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

總結

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

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (12608人查看,2條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
2018年06月05日 19:27team

學習了,解決了我的問題!

------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 色妺妺在线视频| 久久综合狠狠综合久久综合| freexx美国1819xx| 裸体舞蹈xxxx裸体视频| granany中国老太婆| 色五月播五月丁香综合| 狠狠综合久久久久综合网站| aⅴ中文无码亚洲| 老司机午夜视频十八福利| 性欧美长视频免费| 日本av视频在线观看| 国产麻豆剧果冻传媒观看| japanese18一i9| 欧美视频在线电影| 娇小的av|色学生| 好紧好湿太硬了我太爽了视频| 窝窝影院午夜看片| 爆乳的邻居让我天天爽她| 国内视频在线精品一区| 东北老熟妇大声叫痒| 四虎影视在线观看2019a| 无翼乌漫画之本能觉醒| caoporn97免费公开视频| 99久久国产精品免费| 亚洲а∨天堂2019无码| 伊人久久大香线蕉亚洲五月天| 奇米影视亚洲狠狠色777| 小棒堵住前面不让流出来| 人妻系列影片无码专区| 美女扒开大腿让我爽视频| 乱小说录目全文文| http://www.newmoonma.com