CSS中Font的一些基本知識點歸納總結

2022-09-24 20:24:13 字數 2884 閱讀 5276

1、什麼是字型

字型是文字的外在形式,就dojlhcwp是文字的風格,是文字的外衣。比如行書、楷書、草書,都是一種字型。同樣乙個字每個人寫起來都會有差異,可以說每個人都有一套潛在的字型庫。對於web頁面來說,字型就是計算機上儲存的一套文字顯示方式。通過對文字進行一些特殊處理(比如末端加強)來提高不同環境中文字的可讀性。

比如同樣大小的文字,在不同字型下的可讀性是不同的。

一般來講,一款字型檔的誕生,要經過字型設計師的創意設計、字型製作人員一筆一劃的製作、修改,技術開發人員對字元進行編碼、新增程式指令、裝庫、開發安裝程式,測試人員對字型檔進行校對、軟體測試、相容性測試,生產部門對字型檔進行最終產品化和包裝上市等幾個環節。通常情況下文字跟字型庫是一對多的關係,所以對於多語言支援的web頁面,要求設計師在選用字型時不能光考慮一種語言的情況。

2、font-family

關於font-family的介紹大多數只是說明他可以設定文字中的字型名稱序列。其實font-family真正的作用是將一系列近似的字型按照優先順序順序組成乙個列表,瀏覽器從第一項開始依次查詢,找到第一種可用的字型來顯示文字。

font-family: times new roman,"open-sans","幼圓",sans-serif

當瀏覽器顯示乙個字元時,會首先從times new roman中尋找這個字元,如果找到就用times new roman字型來顯示這個字元。如果沒找到就去open-sans中尋找,如果找到就用該字型顯示字元,沒找到就會依次尋找下去,如果在通用字型庫sans-serif中也沒有找到就會用乙個缺字元代替(通常是小方框)。

時間就是金錢time is money.

比如上面這段**,對於漢字部分瀏覽器會先去times new roman中查詢,沒有找到,接著再去open-sans中查詢,仍然沒有找到,繼續到「幼圓」中尋找,幼圓中可以找到對應字元則用該字型來顯示。對於英文部分可以在times new roman中尋找則會用該字型來顯示。

font-familydojlhcwp中有時候字型加引號有時候不加引號。區別在於對字型名稱中空格的處理不同。不加引號時,忽略字型左右兩端的空白字元,單詞之間的空白字元被解釋為乙個空白字元。比如font-family:   times   new   roman   , sans-serif。被解釋為font-family:times new roman,sans-serif。加引號時,需要保留引號內的所有空格。比如font-family:"times    new roman",sans-serif。瀏覽器會去尋找「times   new roman」這個字型。

3、通用字型族

w3c建議在定義字型是最後以乙個類別結尾,例如sans-serif,來保證不同作業系統下網頁都能夠正確顯示。常見的字型族為serif(襯線字型)、san非襯線字型),可以簡單理解為在所有字型都是失效的情況下,瀏覽器從字型族中選擇一種字型來顯示。

一種字型族代表了擁有某類特性的多種字型,字型族中字型的選擇完全有瀏覽器決定。設計者給出的字型應該盡可能覆蓋所有系統,而不應該依賴字型族。字型族一定要放到fondojlhcwpt-family的最後一位。

serif 襯線字型,通常是指使用末端加強原則的字型,通過在文字末端加入細小變化來改變小號文字的可讀性。

上述字型都是襯線字型,文字的末端使用了襯線。陳賢字型具有較高的可讀性,通常用於以大段文字作為表現形式的作品如報紙、書籍等。常見的襯線字型有georgia, garamond, times new roman, 中文的宋體等等。

sans-serif非襯線字型,襯線字型以外的所有字型都成為非襯線字型。非襯線字型的線條比較均勻,通常在藝術字、標題中的使用較多。

由於非襯線字型字條比較均勻,所以在小號文字下的可讀性不如襯線字型。常見的非襯線字型有trebuchet ms, tahoma, verdana, arial, helvetica, 中文的幼圓、隸書等等。

綜上所述,襯線字型適合小號文字的顯示,如果使用非襯線字型要保證font-size足夠大,以確保正文內容的可讀性。11px下的英文推薦使用襯線字型,對於中文,無論如何都不推薦11px下顯示。

4、@font-face

@font-face是鏈結伺服器上的字型的一種方式,就像制定鏈結一樣,瀏覽器會根據這條指令把對應字型**到本地快取,用它去修飾文字。

:字型名稱

:此值指的是你自定義的字型的存放路徑,可以是相對路徑也可以是絕路徑

:此值指的是你自定義的字型的格式,主要用來幫助瀏覽器識別,其值主要有以下幾種型別:truetype, opentype,web open font format, embedded-opentype, svg等

:定義字型相關樣式,符合該樣式設定的文字會使用該字型顯示。

truetype(.ttf)、opentype(.otf)這兩種格式在絕大多數瀏覽器上都dojlhcwp能正常工作。web open font format(.woff)是web字型中最佳格式,他是乙個開放的truetype/opentype的壓縮版本,同時也支援元資料報的分離。embedded open type(.eot)為ie的私有字型格式。svg(.svg)字型是基於svg字型渲染的一種格式。下表中列出了這些格式的瀏覽器相容性。

css code複製內容到剪貼簿

css code複製內容到剪貼簿

上述**中兩次@font-face命令定義了乙個字型族,在普通情況下使用opensans-regular字型,粗體時使用opensans-bold字型。這也印證了我們上文所說,對於字型族中的字型由瀏覽器根據當前設定自動選擇。

如果要使用@font-face通常需要做一些優化工作,比如有的字型庫太大就需要只保留網頁中用到的文字,對於中文字型更是如此,這時候字蛛(fontspider)工具可以來幫助我們;對於進一步優化,可以將字型檔案以base64編碼方式嵌入到css檔案中來減少一次http請求,小公尺主頁就是採用這種方式(這裡和這裡)。

對於字型庫的壓縮可以使用這款工具。

本文標題: css中font的一些基本知識點歸納總結

本文位址:

framebuffer 一些基本知識

horizontal回掃和vertical回掃是crt引入的概念,電子束從左向右畫水平線,回到下一行行首繼續下一行掃瞄,直到螢幕最下一行,然後回到螢幕上方繼續下一幀掃瞄。水平回掃 電子束從上一行尾移動到下一行起始點需要的時間 幀回掃 電子束從螢幕下方移動到螢幕上方所需的時間 crt的重新整理屏率是怎...

tableviewcell的一些基本知識點

cpp view plain copy 無色 cell.selectionstyle uitableviewcellselectionstylenone 藍色 cell.selectionstyle uitableviewcellselectionstyleblue 灰色 cell.selectio...

php入門的一些基本知識

新手上路,高手莫要見怪,呵呵 php筆記1 基本知識 一 一,資料型別 整形 integer 整數集有效範圍 2147483648 2147483648 浮點型 float 浮點數 雙精度數或實數 1.234 1.2e4 12000 布林型 boolean 只能取true 或false兩種 字串 s...