字型是「文字的不同體式」或者「字的形體結構」。對於英文而言,每種字型都是由一組具有獨特樣式的字母、數字和符號組成的。根據外觀,字型可以分為不同的類別(font collection),包括襯線字型(serif)、無襯線字型(sans-serif)和等寬字型(monospace)。每一類字型可以分成不同的字型族(font family),比如 times 和 helvetica。而字型族中又可以包含不同的字型(font face),反映了相應字型族基本設計的不同變化,例如 times roman、 times bold、 helvetica condensed 和 bodoni italic。css字型屬性主要描述一類字型的大小和外觀,比如:使用什麼字型族(是 times,還是 helvitica),多大字型大小,粗體還是斜體。
font-family 用於設定元素中的文字使用什麼字型,具體用法參考font-family,其常見應用和問題如下:
繼承性
font-family是可以繼承的屬性,因此它的值會遺傳給所有後代元素。在實際應用font-family的時候,應該給整個頁面設定一種主字型,然後只對那些需要使用不同字型的元素再應用 font-family。要為整個頁面指定字型,可以設定 body 元素的 font-family 屬性。
字型棧
每種作業系統自帶的字型不多,而且使用者隨時會安裝和刪除字型,因此不敢保證一定能應用某種字型來顯示網頁。為此,在指定文字的字型時,需要多列出幾種後備字型,以防第一種字型無效。這個列表也叫字型棧,例如:body
。注意,字型棧的最後一項要指定乙個通用的字型類,如:sans-serif
。通用的字型類有:
字型搭配
參考文獻
通用字型
linux
android
ios預設字型
如果字型名像 trebuchet ms 一樣多於乙個單詞(有空格),應該加上引號
font-family 的值(字型名)不區分大小寫
瀏覽器樣式表預設為每個 html 元素都設定了 font-size,因此你在設定 font-size 的時候,其實是在修改預設值。由於字型大小在標記層次中是可以繼承的,假如你對使用的字型大小單位怎麼影響繼承不十分了解,那很容易碰到有些字型莫名其妙變大或變小的問題。字型的具體用法可以參考font-size,常見應用和問題如下:
相對單位
使用rem
瀏覽器縮放與字型大小調整對字型大小的影響
字型樣式預設是正體,也可以是斜體,具體用法參考font-style。在實際應用中,英文中的斜體主要表示強調,如果是為了表示強調設定font-style,那麼在在 html 標記中直接使用標籤即可。
字型粗體的主要作用是表示重要,具體用法參考font-weight。
在實際應用中,由於瀏覽器對font-weight的數字值實現各不相同,所以從常規字型到粗體的切換可能發生在不同的數值上——通常是 400。所以,對於font-weight屬性來說,最好只用 bold 和 normal 這兩個值。
此外,html 元素 strong 也表示重要,而它的默樣式就是粗體,如果要突出文字中的某乙個字或次,請使用strong。
font-variant屬性除了normal,就只有乙個值,即 small-caps——導致所有
小寫英文本母變成小型大寫字母,具體用法請參考font-variant
font 屬性是乙個簡寫形式,通過它只要一條 css 宣告就可以設定所有字型屬性,例如:p
。具體規則如下:
font屬性除了用於字型屬性的簡寫外,還可以給它指定一些特殊的值,如下所示:
web字型指的是非使用者機器中的字型。目前,可以通過使用@font-face規則在網頁中嵌入web字型,並且該功能已經得到了瀏覽器廣泛支援。設定web字型的方式如下所示:
font squirrel提供了很多現成的字型包,每個字型包中都包含所有必要格式的字型和為每款瀏覽器提供正確格式的 css **。另外,font squirrel還有乙個轉換程式,能夠把你上傳的字型轉換成字型包。下面就是 font squirrel 為 ubuntu titling bold 字型生成的@font-face **。對於其他**的字型,這種格式也是適用的。
@font-face
web字型的其他問題:
文字就是一組字或字元,比如章標題、段落正文等等,跟使用什麼字型無關。
css文字屬性描述對文字的處理方式,比如:行高或者字元間距多大,有沒有下劃線和縮排。常用的css文字屬性如下所示:
text-indent屬性設定行內盒子相對於包含元素的起點,具體用法參考text-indent,常見問題和注意點如下:
letter-spacing為正值時增大字元間距,為負值時縮小間距。無論設定字型大小時使用的是什麼單位,設定字元間距一定要用相對單位,以便字間距能隨字型大小同比例變化。具體用法請參考[letter-spacing]。(
css把任何兩邊有空白的字元和字串都視作「單詞」,純漢字文字一段之中沒有空格,因此單詞間距對中文網頁幾乎沒有用,但對中英混排段落可能有用。單詞間距屬性具體用法請參考word-spacing。
文字裝飾有下劃線、上劃線、貫串線和閃爍等樣式,具體用法可參考text-decoration
一般文字對齊方式有:左對齊/left、右對齊/right、居中對齊/center,以及兩端對齊/justify,其中兩端對齊是css3新增的屬性。除此之外,css3還定義了一些額外的屬性,但瀏覽器都不怎麼支援,具體內容請參考text-align。
在實際應用中,如果對元素設定了文字對齊屬性,而對子元素是如何顯示存在疑惑時,只要根據一下規則去計算即可:
css 中的行高平均分布在一行文字的上方和下方,具體用法參考line-height。常見問題和注意點如下:
文字轉換屬性用於轉換元素中文字的大小寫,它可以設定英文文字首字母大寫、全部字母大寫和全部字母小寫。具體用法可參考text-transform。
垂直對齊屬性vertical-align
以基線為參照上下移動文字, 具體用法參考vertical-align。常見問題和注意點:
雖然學習了字型和文字屬性,但不一定能夠在實際應用中搭配好字型和文字樣式。文字排版講求勻稱,一般是由看不見的網格,框定頁面文字的走向和布局,勻稱的版式可以增強頁面的可讀性。
- -
CSS字型和文字相關
目前在做ife的練習,初步學習到css內容,所以做了總結。本博文主要分為兩部分,第一部分介紹css字型屬性,第二部分則介紹了文字常用屬性 s1 首先介紹一下什麼是字型系列 所謂字型系列,我理解的就同一字型下 的不同風格的具體字型的集合。通俗模擬一下,我們知道楷書下有不同風格的字型,比如顏體 柳體 瘦...
Css顏色和文字字型
顏色名表示,比如 red 紅色,gold 金色 16進製制數值表示,比如 ff0000 表示紅色,這種可以簡寫成 f00 rgb顏色 紅 r 綠 g 藍 b 三個顏色通道的變化 background color rgb 200,100,0 rgba顏色 紅 r 綠 g 藍 b 透明度 a backg...
CSS字型屬性和文字屬性
字型屬性 font size px 字型的大小 font weight 400 700 bold,表示加粗 400 lighter,不加粗 font family 字型 font style 字型為斜體或者正常字型字型的復合語法 選擇器文字屬性 color 文字顏色 text algin under...