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

資訊專欄INFORMATION COLUMN

Web字體的初探

luckyyulin / 891人閱讀

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

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

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

2.5 使用web font的方法
2.5.1 使用link標簽
通過link導入樣式，然后直接通過font-family使用，如：

font-family:"lobster"

參考Google Fonts

2.5.2 使用@import導入
通過@import導入字體的樣式，如：

@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
首先需要從網站下載對應的字體，然后url填入文件路徑，如：

`@font-face{

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

font-family:saucer;

2.5.5 使用這些特殊字體的弊端
使用這些特殊字體可以產生很炫酷的文字，但是也存在很大的弊端：
1，不同的環境顯示的內容可能不一樣
2，顯示的內容不可靠
3，需要把字體包含到網站（有時可能有100kb大）中需要消耗大量的下載時間
三，大型網站上的字體實踐 
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";

參考的網站：

creating good websites

serif和sans-serif的區別

中文字體網頁開發指南

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49641.html

相關文章

  • web安全初探

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

    Y3G 評論0 收藏0

  • web安全初探

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

    xuhong 評論0 收藏0

  • Web存儲之LocalStorage初探

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

    wpw 評論0 收藏0

  • RN 技術探索：Hermes Engine 初探

    摘要：原方式中是經過壓縮的腳本文件，預編譯后則是二進制文件。兩者影響疊加導致整體減小，包大小得到優化。引擎包引擎包官方文檔中對內存區的描述您的應用用于處理代碼和資源如字節碼已優化或已編譯的碼庫和字體的內存。本文首發自普惠出行產品技術 自從 Google 的 Flutter 發布之后，Facebook 對 React-Native 的迭代開始快了起來，優化 React-Native 的性能表現...

    Cc_2011 評論0 收藏0

發表評論

0條評論

luckyyulin

男|高級講師

TA的文章

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