超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置|北京藍(lán)藍(lán)UI設(shè)計(jì)公司

2023-12-5    周周

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

前言 

不同操作系統(tǒng)、不同瀏覽器下的默認(rèn)字體是不同的,在網(wǎng)頁(yè)項(xiàng)目中可以通過(guò) CSS 的 font-family 和 @font-face 來(lái)讓頁(yè)面渲染出適合當(dāng)前網(wǎng)頁(yè)的字體。

除了特定設(shè)置,正確的字體引用會(huì)避免兩種字形同時(shí)出現(xiàn):

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

中西文的字重不統(tǒng)一:

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

 

一、關(guān)于 font-family 屬性

1. 字體的 fallback 機(jī)制

在 CSS 中,可以通過(guò) font-family 引用多種系列、多種字體,并且可以對(duì)字體先后順序進(jìn)行設(shè)置。

當(dāng)用戶打開(kāi)一個(gè)網(wǎng)頁(yè)的時(shí)候,瀏覽就會(huì)讀取 font-family 第一個(gè)引用的字體,并去檢索用戶當(dāng)前操作系統(tǒng)下的字體,如有就顯示,如沒(méi)有就檢索下一個(gè),以此類推。

若瀏覽器找不到指定的字體,或者沒(méi)有設(shè)置 font-family 則會(huì) fallback 到瀏覽器的默認(rèn)字體。

2. 字體的先后順序設(shè)置

由于中文字體內(nèi)都包含西文字體,如想優(yōu)先顯示效果較好的西文字體,需要將西文字體寫(xiě)在中文字體的前面。

雖然用戶群體中使用 Windows 系統(tǒng)較多,但 Mac 用戶大部分會(huì)下載 Office,所以會(huì)存在許多 Windows 下常見(jiàn)的字體,比如微軟雅黑。將 macOS 系統(tǒng)的字體寫(xiě)在 Windows 的前面,可以保證在對(duì)應(yīng)平臺(tái)顯示更好的效果。

二、常見(jiàn)的網(wǎng)頁(yè)字體

先了解 serif(襯線體)與 sans-serif(無(wú)襯線體)

襯線體與無(wú)襯線體是兩種最基礎(chǔ)的字形分類,襯線體在筆畫(huà)開(kāi)始與末端的地方有像小三角的裝飾。

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

襯線體更多使用在印刷品上,在紙張上有棱角的字體更容易被識(shí)別。而在屏幕顯示中字體過(guò)多的裝飾點(diǎn)綴容易造成視覺(jué)疲勞,所以在屏幕顯示中更多使用無(wú)襯線體。

一些常見(jiàn)常用的字體:

system-ui

一種通用字體系列,它會(huì)選擇當(dāng)前操作系統(tǒng)的默認(rèn)字體渲染。如在 macOS 與 iOS 系統(tǒng)里 system-ui 指向的中文字體為蘋(píng)方,西文字體為 .SF NS。

-apple-system

system-ui 的兼容寫(xiě)法,在 macOS 與 iOS 系統(tǒng)里調(diào)用蘋(píng)果系統(tǒng)的默認(rèn)字體。

BlinkMacSystemFont

為 macOS Chrome 里調(diào)用蘋(píng)果系統(tǒng)的默認(rèn)字體。

Arial

無(wú)襯線西文字體,經(jīng)常與 Helvetica 一起出現(xiàn),支持不同操作系統(tǒng)、不同瀏覽器,兼容性好,屬于安全字體。

Tahoma

無(wú)襯線西文字體,經(jīng)常出現(xiàn),支持不同操作系統(tǒng)、不同瀏覽器,兼容性好,屬于安全字體。

Helvetica / Helvetica Neue

蘋(píng)果生態(tài)中最常用的無(wú)襯線西文字體,Helvetica Neue 是 Helvetica 的升級(jí)版,加了不同粗細(xì)、不同寬度的字形。

Segoe UI

無(wú)襯線西文字體,Windows 系統(tǒng)的默認(rèn)西文字體。

Roboto

無(wú)襯線西文字體,Android 系統(tǒng)的默認(rèn)西文字體。

蘋(píng)方

無(wú)襯線中文字體,蘋(píng)果系統(tǒng)的默認(rèn)中文字體,除了中文簡(jiǎn)體(PingFang SC),還有臺(tái)灣繁體(PingFang TC)和香港繁體(PingFang HK)。

Hiragino Sans GB (冬青黑體)

無(wú)襯線中文字體,用于兼容不支持蘋(píng)方的舊版蘋(píng)果系統(tǒng),作為蘋(píng)方字體的 fallback。

Microsoft YaHei (微軟雅黑)

無(wú)襯線中文字體,Windows 系統(tǒng)的默認(rèn)中文字體,iOS 與 Android 系統(tǒng)不支持微軟雅黑。

Noto Sans (思源黑體)

無(wú)襯線中文字體,Android 系統(tǒng)的默認(rèn)中文字體,由 Google 與 Adobe 推出的開(kāi)源字體。除了中文簡(jiǎn)體(Noto Sans CJK SC),還有中文繁體( Sans CJK TC)。

WenQuanYi Micro Hei (文泉驛微米黑)

無(wú)襯線中文字體,Linux 系統(tǒng)的默認(rèn)中文字體,用于兼容 Linux 系統(tǒng)。

Simsun (宋體)

襯線中文字體,風(fēng)格明顯,支持 Windows 與 macOS 系統(tǒng)。

sans-serif

一種無(wú)襯線字體系列,常見(jiàn)的兜底字體,在前面所有引用的字體都找不到時(shí)會(huì)生效,顯示當(dāng)前瀏覽器默認(rèn)的無(wú)襯線字體。

三、 一些常見(jiàn)網(wǎng)站的字體設(shè)置

1. 怎么查看網(wǎng)頁(yè)項(xiàng)目的引用字體

打開(kāi)瀏覽器的檢查,用選中功能點(diǎn)擊要查看的文字:

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

即可看到字體堆棧,以及當(dāng)前生效的字體。

當(dāng)選中的文本包含中文和西文時(shí),即可看到當(dāng)前生效的中西文字體。

如圖,由于在第一位的 -apple-system 生效,所以當(dāng)前中文字體為 PingFang SC,西文字體為 .SF NS。

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

2. 愛(ài)奇藝

由于將蘋(píng)方寫(xiě)在最前面,因此西文字體也是蘋(píng)方自帶的西文,所以寫(xiě)在后面的 Helvetica 沒(méi)有生效。

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

有些會(huì)在網(wǎng)頁(yè)中顯示特定字體:

3. 騰訊官網(wǎng)

TencentSans

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

4. OPPO 官網(wǎng)

OPPO Sans

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

會(huì)發(fā)現(xiàn)在 Rendered Fonts 中顯示 TencentSans 和 OPPO Sans 為 Network resource,不同于知乎和愛(ài)奇藝渲染出的字體為 Local file。

因?yàn)樘囟ㄗ煮w除非用戶主動(dòng)下載安裝,并不能確保存在于所有用戶的電腦內(nèi),僅僅用 font-family 引用,未安裝字體的電腦都無(wú)法渲染出來(lái)。

四、如何在網(wǎng)頁(yè)項(xiàng)目中顯示特定的字體

方法一:

將需要使用的字體文件下載后放在服務(wù)器上,用 @font-face 將字體文件作為一個(gè)資源應(yīng)用到 CSS 文件。

為了兼容不同瀏覽器需要準(zhǔn)備多種字體格式文件,字體格式文件與瀏覽器的兼容情況:

.ttf / .otf

Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Safari4.2+。

.woff

IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+。

.eot

IE4+ 專用。

.svg

主要針對(duì) Safari 做兼容。

方法二:

谷歌提供了一個(gè)網(wǎng)站 Google Fonts 可以下載、或者鏈接字體資源庫(kù)。

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

方法三:

有種技術(shù)可以將網(wǎng)站用到的文字按需截取并生成 .ttf .eot .woff .svg 四種能支持所有瀏覽器的字體格式文件,將字體體積優(yōu)化到最小。也有第三方網(wǎng)站支持,比如有字庫(kù)網(wǎng)站只要提交需要使用的字體,或者提供一段 js 代碼即可實(shí)現(xiàn)。

方法四:

如果項(xiàng)目中只是少量地方使用特殊字體,可以考慮切圖,導(dǎo)出 .svg 格式(比 .png 更清晰)導(dǎo)出前,將文本輪廓化,使文字變成形狀,不然可能會(huì)導(dǎo)致 svg 內(nèi)部字體失效,如下圖:

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

五、CSS 引用不可商用的字體會(huì)造成侵權(quán)嗎

用 font-family 的屬性引用不可商用的字體,并且網(wǎng)頁(yè)中也能顯示這種字體,不會(huì)構(gòu)成侵權(quán)問(wèn)題,也不需要進(jìn)行額外的授權(quán)許可。因?yàn)槟軌蛴?font-family 引用成功的字體是用戶系統(tǒng)內(nèi)本身就存在的字體。

但這只限于在電腦中顯示,如果對(duì)網(wǎng)頁(yè)截下來(lái)的圖片用于宣傳,就脫離了電腦系統(tǒng)的范圍,這時(shí)沒(méi)有購(gòu)買字體版權(quán)的話就屬于侵權(quán)。

使用 @font-face 需要將字體文件下載后上傳項(xiàng)目或服務(wù)器引用,使頁(yè)面顯示字體不再依賴用戶系統(tǒng)自帶字體,這時(shí)如要使用到不可商用的字體,需要購(gòu)買字體版權(quán),否則就屬于侵權(quán)。

六、為什么中西文的字重不統(tǒng)一

設(shè)定字體字重的屬性 font-weight 的值可以使用短語(yǔ)或者數(shù)字(權(quán)重級(jí)別),短語(yǔ)有效值為 normal 和 bold,數(shù)字的有效值為 100-900。

短語(yǔ)的 normal 對(duì)應(yīng)數(shù)字的 400,也就是設(shè)計(jì)軟件中常見(jiàn)到的“常規(guī)體“,bold 對(duì)應(yīng) 700。

瀏覽器在渲染字體的時(shí)候,會(huì)從字體中找到對(duì)應(yīng)的權(quán)重級(jí)別進(jìn)行渲染,但并不是每個(gè)字體都有 100-900 的權(quán)重級(jí)別,有些字體只提供 normal 和 bold 兩種字重,就拿常見(jiàn)的 Arial 和 Noto Sans(思源黑體)中西文混合舉例:

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

上圖看起來(lái)西文字體會(huì)比中文字體更粗一些,在設(shè)計(jì)軟件內(nèi)設(shè)置字體為“中粗體”,那么 font-weight 的值就為 500。

由于西文 Arial 只有 normal 和 bold 兩種字重,500 的權(quán)重級(jí)別大于了 normal 對(duì)應(yīng)的 400,所以顯示了 bold(700),而 Noto Sans (思源黑體)字體提供了對(duì)應(yīng) 500 的中粗體,因此出現(xiàn)了中西文字體的字重不統(tǒng)一。

七、字體網(wǎng)站推薦

1. 字由

網(wǎng)址:https://www.hellofont.cn/font-list

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

2. 優(yōu)設(shè)字體導(dǎo)航

網(wǎng)址:https://hao.uisdc.com/font/

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

3. Google Fonts

網(wǎng)址:https://www.googlefonts.cn/chinese

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁(yè)設(shè)計(jì)中的字體設(shè)置

文章來(lái)源:優(yōu)設(shè)網(wǎng)    作者:干了這噸檸檬汁

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)(m.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI設(shè)計(jì)公司、界面設(shè)計(jì)公司UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)公司軟件界面設(shè)計(jì)公司、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔