學習使用CSS更改字體屬性
字體和CSS
CSS是調整網頁上字體的最有效方式。 您可以控製字體系列 ,大小,顏色,重量以及排版的許多其他方面。
CSS中的字體屬性是使頁面更獨特和獨特的最常見方式之一。 使用CSS字體屬性很容易改變文本的顏色,大小,甚至是面部(字體本身)。
- 顏色
- 字體系列
- 字體大小
字體有三個部分:
- 顏色
- 這是字體在屏幕上顯示的顏色。
- 尺寸
- 這是字體在屏幕上呈現的大小。
- 面對
- 這是字體系列,通常稱為實際字體。
字體顏色
要更改文本的顏色,只需使用CSS顏色樣式屬性即可。 您可以使用顏色名稱或十六進制代碼。 與網頁上的所有顏色一樣,最好使用瀏覽器安全顏色 。
在您的網頁中嘗試以下樣式:
這個字體是紅色的
這個字體是藍色的
字體大小
當您在網頁上設置字體大小時,您可以將其設置為相對大小,或者使用像素,厘米或英寸作為非常具體的設置。 但是,更精確的字體大小旨在用於打印,而不是用於網頁,其中查看您的網站的每個人都可能具有不同的分辨率,顯示器大小或默認字體設置。 因此,如果您選擇15px作為標準尺寸,您可能會很不高興地看到您的字體對您的客戶有多大或多小。
我建議你使用ems字體大小 。 Ems允許您的頁面保持可訪問性,而不管誰在查看它,而ems是用於屏幕渲染的。 讓您的像素和點進行打印呈現。 要更改字體大小,請在網頁中放入以下樣式:
這個字體是1em
這個字體是.75em
這個字體是1.25em
字體的面孔
字體的表面是許多人想到“字體”時的想法。您可以聲明任何您喜歡的字體,但請記住,如果您的讀者沒有安裝該字體,他們的瀏覽器將嘗試找到匹配為它,他們的網頁不會像你想要的。
要解決此問題,您可以指定一個用逗號分隔的名稱列表,供瀏覽器按照首選項的順序使用。 這些被稱為字體堆棧。 請記住,PC上的標準字體(如Arial)可能不是Macintosh上的標準字體。 因此,您應該始終使用最低限度安裝的機器(最好在兩個平台上)查看您的頁面,以確保即使使用最少的字體,您的頁面看起來也是按照設計的。
我最喜歡的字體堆棧之一是這個集合是一個無襯線字體集合,雖然日內瓦和宋體看起來並不十分相似,但它們在Macintosh和Windows電腦上都是相當標準的 。 我在其他操作系統上為客戶提供了helvetica和helv,例如Unix或Linux,可能沒有強大的字體庫。
這個字體是sans-serif
這個字體是serif