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

資訊專欄INFORMATION COLUMN

Web字體的初探

luckyyulin / 897人閱讀

摘要：字體的初探一，字體基本概念的介紹字體的分類襯線體襯線在印刷的文字中襯線字體對于人眼的辨識更輕松，閱讀更舒服橫細(xì)豎粗，開始和結(jié)束的地方有裝飾。無論是還是下，不指定網(wǎng)頁的中文字體時，默認(rèn)的就是宋體。

Web字體的初探 一，字體基本概念的介紹 1.1 字體的分類
1.1.1 Serif（襯線體）
Serif（襯線）：在印刷的文字中襯線字體對于人眼的辨識更輕松，閱讀更舒服橫細(xì)豎粗，開始和結(jié)束的地方有裝飾。在web上的字體，襯線字體比無襯線字體的辨識度更低，因?yàn)槠聊幌袼赜邢?，不能很好地渲染出襯線體的效果。
1.1.2 Sans-Serif（無襯線體)
Sans-Serif(無襯線體）：在印刷的文字中，無襯線體比較醒目，在小字體場合比襯線體更加清晰，但是辨識度沒有襯線體高。在web字體中，無襯線字體比襯線字體更易讀。
1.1.3 Monospace（等寬字體）
Monospace（等寬字體）：每個寬度都一致的字體，看起來比較整齊，比較適合用于顯示代碼。比較著名的有Courier New字體。
1.1.4 Cursive（草書）
Cursive（草書）：相當(dāng)于印刷中的手寫體，看起來比較流暢，像手寫一樣。
1.2 常用的字體 
Serif，Sans-Serif，Monospace屬于標(biāo)準(zhǔn)字體，Cursive,Fantasy屬于非標(biāo)準(zhǔn)字體
1.2.1 襯線體（Serif）
常用的中文襯線體：宋體（Simsun），仿宋（FangSong），楷體（KaiTi），華文仿宋（STFangSong），華文楷體（STKaiTi）。
常見的英文襯線體：Times new Roman，Times
1.2.2 無襯線體（Sans-Serif）
常見的中文無襯線體：微軟雅黑（Microsoft YaHei），黑體（SimHei），華文細(xì)黑（STXiHei）
常見的英文無襯線體：Tahoma，Arial，Helvetica，Verdana
1.2.3 等寬字體（monospace）
常見的等寬字體：Courier New，Courier
1.2.4 草書（Cursive）
常見的草書：Comic Sans MS
1.2.5 Fantasy
常見的Fantasy：Impact
二，網(wǎng)站中使用的字體 2.1 英文網(wǎng)站中使用的默認(rèn)字體 
font：12px/1.5 Tahoma,Helvetica,Arial,sans-serif
Tahoma：英文windows操作系統(tǒng)默認(rèn)的字體
Helvetica：Mac OS X系統(tǒng)的系統(tǒng)默認(rèn)字體
Arial：早期windows英文系統(tǒng)的默認(rèn)字體。XP和Vista都是Tahoma
Sans-serif是針對linux的，linux默認(rèn)只有kernel，字體由用戶自定義。
無論是XP還是Vista下，不指定網(wǎng)頁的中文字體時，默認(rèn)的就是宋體。因此在font-family中使用”宋體“是多余的，可以省去。
2.2 Windows操作系統(tǒng)提供的中文字體 
黑體：SimHei
宋體：SimSun
新宋體：NSimSun
仿宋：FangSong
楷體：KaiTi
仿宋GB2312：FangSongGB2312
楷體GB2312：KaiTiGB2312
微軟雅黑：Microsoft YaHei(Windows 7開始提供）
2.3 OS X操作系統(tǒng)提供的中文字體 
冬青黑體：Hiragino Sans GB（Snow Leopard開始提供）
華文細(xì)黑：STHeiti Light（又名STXiHei）
華文黑體：STHeiTi
華文楷體：STKaiTi
華文宋體：STSong
華文仿宋：STFangsong
2.4 更多有趣的字體使用

上面介紹的字體屬于常見的字體，也就是我們所說的Web safe font。其在大部分網(wǎng)站是可以正常顯示的。下面介紹的是比較有趣特殊的字體的使用方式。

2.5 使用web font的方法
2.5.1 使用link標(biāo)簽
通過link導(dǎo)入樣式，然后直接通過font-family使用，如：

font-family:"lobster"

參考Google Fonts

2.5.2 使用@import導(dǎo)入
通過@import導(dǎo)入字體的樣式，如：

@import url(https://fonts.googleapis.com/css?family=Candal);

font-family:"Candal"

參考Google Fonts

2.5.3 使用javascript
通過javascript獲取字體樣式，如：

font-family:"Shadows Into Light"

參考Google Fonts

2.5.4 使用font-face
首先需要從網(wǎng)站下載對應(yīng)的字體，然后url填入文件路徑，如：

`@font-face{

            font-family:"saucer";
            src:url("fonts/SaucerBB.ttf") format("truetype");
        }`

font-family:saucer;

2.5.5 使用這些特殊字體的弊端
使用這些特殊字體可以產(chǎn)生很炫酷的文字，但是也存在很大的弊端：
1，不同的環(huán)境顯示的內(nèi)容可能不一樣
2，顯示的內(nèi)容不可靠
3，需要把字體包含到網(wǎng)站（有時可能有100kb大）中需要消耗大量的下載時間
三，大型網(wǎng)站上的字體實(shí)踐 
1.淘寶：font-family: tahoma, arial, "Hiragino Sans GB", 宋體, sans-serif;
2.百度：font-family: arial, 宋體, "Hiragino Sans GB", "Microsoft Yahei", 微軟雅黑, 宋體, Tahoma, Arial, Helvetica, STHeiti;
3.京東：font-family: Arial, Verdana, 宋體；
4.Youtube：font-family: Roboto, arial, sans-serif;
5.github：font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";

參考的網(wǎng)站：

creating good websites

serif和sans-serif的區(qū)別

中文字體網(wǎng)頁開發(fā)指南

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

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

相關(guān)文章

  • web安全初探

    摘要：安全初探攻擊攻擊全稱跨站腳本攻擊，是為不和層疊樣式表的縮寫混淆，故將跨站腳本攻擊縮寫為，是一種在應(yīng)用中的計(jì)算機(jī)安全漏洞，它允許惡意用戶將代碼植入到提供給其它用戶使用的頁面中。 web安全初探 XSS攻擊 XSS攻擊全稱跨站腳本攻擊，是為不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆，故將跨站腳本攻擊縮寫為XSS，XSS是一種在web應(yīng)用中的計(jì)算機(jī)安全...

    Y3G 評論0 收藏0

  • web安全初探

    摘要：安全初探攻擊攻擊全稱跨站腳本攻擊，是為不和層疊樣式表的縮寫混淆，故將跨站腳本攻擊縮寫為，是一種在應(yīng)用中的計(jì)算機(jī)安全漏洞，它允許惡意用戶將代碼植入到提供給其它用戶使用的頁面中。 web安全初探 XSS攻擊 XSS攻擊全稱跨站腳本攻擊，是為不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆，故將跨站腳本攻擊縮寫為XSS，XSS是一種在web應(yīng)用中的計(jì)算機(jī)安全...

    xuhong 評論0 收藏0

  • Web存儲之LocalStorage初探

    摘要：存儲之初探的發(fā)布和定稿為前端界帶來巨大的變化，新增的和特性給業(yè)務(wù)帶來了更多可能性，讓用戶體驗(yàn)擁有了更可能的豐富。只讀返回一個整數(shù)，表示存儲在對象中的數(shù)據(jù)項(xiàng)數(shù)量。會在過期時間之后銷毀。安全性方面，中一般不建議存儲敏感信息。 Web存儲之LocalStorage初探 HTML5的發(fā)布和定稿為前端界帶來巨大的變化，新增的API和特性給業(yè)務(wù)帶來了更多可能性，讓用戶體驗(yàn)擁有了更可能的豐富。 · ...

    wpw 評論0 收藏0

  • RN 技術(shù)探索：Hermes Engine 初探

    摘要：原方式中是經(jīng)過壓縮的腳本文件，預(yù)編譯后則是二進(jìn)制文件。兩者影響疊加導(dǎo)致整體減小，包大小得到優(yōu)化。引擎包引擎包官方文檔中對內(nèi)存區(qū)的描述您的應(yīng)用用于處理代碼和資源如字節(jié)碼已優(yōu)化或已編譯的碼庫和字體的內(nèi)存。本文首發(fā)自普惠出行產(chǎn)品技術(shù) 自從 Google 的 Flutter 發(fā)布之后，F(xiàn)acebook 對 React-Native 的迭代開始快了起來，優(yōu)化 React-Native 的性能表現(xiàn)...

    Cc_2011 評論0 收藏0

發(fā)表評論

0條評論

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