資訊專欄INFORMATION COLUMN
摘要：理解字體和文本屬性，對(duì)于創(chuàng)造出專業(yè)水準(zhǔn)的網(wǎng)頁排版非常重要。為字體和文本分別定義了屬性。字體屬性主要描述了一類字體的大小和外觀。還有一種新增的單位字體樣式值示例說明和都表示斜體英文中的斜體主要表示強(qiáng)調(diào)。字體粗細(xì)可能的值，或者和。
1.網(wǎng)頁中字體的來源理解字體和文本屬性，對(duì)于創(chuàng)造出專業(yè)水準(zhǔn)的網(wǎng)頁排版非常重要。一個(gè)網(wǎng)站的品質(zhì)如何，有時(shí)候只要看看它用的字體就能一目了然。
用戶機(jī)器中安裝的字體
保存在第三方網(wǎng)站上的字體（可以用link標(biāo)簽把它們鏈接到你的頁面上）
保存在你的Web服務(wù)器上的字體（可以使用@font-face規(guī)則隨網(wǎng)頁一起發(fā)送給瀏覽器）
2.字體和文本的區(qū)別 2.1 字體字體是 文字的不同體式 或 字的形體結(jié)構(gòu)。
根據(jù)外觀，字體可分為不同的類別（font-collection），包括襯線字體（serif）、無襯線字體（sans-serif）和等寬字體（monospace）。每一類字體可以分為不同的字體族（font family），比如 Times 和 Helvetica。而字體族中又可以包含不同的字形（font face），反映了相應(yīng)字體族基本設(shè)計(jì)的不同變化。例如 Times Roman、Times Bold、Helvetica Condensed 和 Bodoni italic。
2.2 文本文本就是一組字或字符，比如文章標(biāo)題、段落正文等等，跟使用什么字體無關(guān)。
3. 字體屬性 3.1 字體族 font-familyCSS 為字體和文本分別定義了屬性。字體屬性主要描述了一類字體的大小和外觀。比如，用了什么字體族，多大字號(hào)，粗體還是斜體。文本屬性描述了對(duì)文本的處理方式。比如，行高或者字符間距多大，有沒有下劃線和縮進(jìn)。
示例：h2 {font-family:times, serif;}
3.2 字體大小 font-size注意：如果一個(gè)字體名多于一個(gè)單詞（有空格），應(yīng)該加上引號(hào)。
例如：body {font-family:"trebuchet ms", tahoma, sans-serif;}
示例：h2 {font-size:18px;}
3.3 字體樣式 font-style提示：總的來說，用于設(shè)定字體大小的單位有兩種，一種是絕對(duì)單位，比如像素或點(diǎn)，另一種是相對(duì)單位，比如百分比或em。（還有一種CSS3新增的rem單位）
值：italic、oblique、normal
示例：h2 {font-style:italic;}
說明：
italic和oblique都表示斜體；
英文中的斜體主要表示強(qiáng)調(diào)。假如你真想表示強(qiáng)調(diào)，那在 HTML 標(biāo)記中直接使用
標(biāo)簽即可，因?yàn)樗J(rèn)就是斜體。
font-style 有一個(gè) normal 值，中文就是常規(guī)的意思。 這個(gè)值其實(shí)不僅 font-style 有，很多其他屬性也有，它的作用就是取消所有的特殊樣式。這個(gè)值是用來有選擇地覆蓋某個(gè)默認(rèn)或你設(shè)定的全局屬性的。
3.4 字體粗細(xì) font-weight可能的值：100、 200……900，或者 lighter、 normal、 bold 和 bolder。
示例： a {font-weight:bold;}
說明：粗體的主要作用是表示重要。實(shí)際上， HTML 元素 strong 也表示重要，而它的默認(rèn)
樣式就是粗體。
值： small-caps（將所有小寫字母變成小型大寫字母）、 normal
示例： blockquote {font-variant:small-caps;}
說明：慎用，大寫字母不像小寫字母那樣有上伸部分和下伸部分作為視覺提示，所以全都使用大寫字母會(huì)增加辨識(shí)難度。
示例：
p {font: bold italic small-caps .9em helvetica, arial, sans-serif;}
Here"s a piece of text loaded up with every possible font property.
說明：使用這個(gè)簡(jiǎn)寫形式要遵守兩條規(guī)則，否則瀏覽器無法正確解釋聲明的值。
規(guī)則一：必須聲明 font-size 和 font-family 的值
規(guī)則二：所有值必須按如下順序聲明：
font-weight、 font-style、 font-variant 不分先后；
然后是 font-size；
最后是 font-family。
4.文本屬性 4.1 文本縮進(jìn) text-indent提示：實(shí)際上，在設(shè)定 font-size 屬性的同時(shí)，可以順便設(shè)定 line-height（行高）值。也就是說，字體大小和行高的值可以寫在一塊，比如 12px/1.5。當(dāng)然， line-height 是
文本屬性，下一節(jié)我們會(huì)講到它。
值：長(zhǎng)度值（正、負(fù)均可）
示例：p {text-indent:3em;}
值：任何長(zhǎng)度值（正、負(fù)值均可）。
示例：p {letter-spacing:.2em;}
值：任何長(zhǎng)度值（正、負(fù)值均可）。
示例：p {word-spacing:.2em;}
值：underline、overline、line-through、blink、none。
示例：.retailprice {text-decoration:line-through;}
值：left、right、center、justify
示例：p {text-align:right;}
值：任何數(shù)字值（不用指定單位）
示例：p {line-height:1.5;}
說明：
CSS中的行高平均分布在一行文本的上方和下方。比如，如果字體大小是12像素，行高是20像素，則瀏覽器會(huì)在文本上方和下方各加4像素的空白，以湊足20像素的行高。
修改默認(rèn)行高最簡(jiǎn)單的方式就是使用font快捷屬性，以復(fù)合值的形式把 font-size 和 font-height 的值寫在一起，比如：div#intro {font: 1.2em/1.4 helvetica, arial, sans-serif;} 在上面的一行代碼，行高就是字體大小12em的1.4倍。注意這里不用給line-heightz 值指定單位，只要一個(gè)數(shù)值就可以。
4.7 文本轉(zhuǎn)換 text-transform值：none、uppercase、lowercase、capitalize。
示例：p {text-transform:capitalize;}
說明：capitalize 值會(huì)將每個(gè)詞的首字母裝換為大寫，這種效果在很多廣告、報(bào)道、雜志的標(biāo)題中很常見。
值：任意長(zhǎng)度值以及 sub、 super、 top、 middle、 bottom 等。
示例：span {vertical-align:60%;}
說明：
vertical-align 以基線為參照上下移動(dòng)文本，但這個(gè)屬性只影響行內(nèi)元素。
如果想在垂直方向上對(duì)齊塊級(jí)元素，必須把其display屬性設(shè)定為inline。
該屬性較為常用于公式或化學(xué)分子式中的上下標(biāo)，或用于文本中腳注的角標(biāo)。
HTML 標(biāo)簽和有默認(rèn)的上標(biāo)和下標(biāo)樣式，但重新設(shè)定一下vertical-align 和 font-size 屬性能得到更美觀的效果。例如：p.custom {font-size:.8em; vertical-align:1em;}
5. Web 字體5.1 設(shè)定Web字體的方式目前，使用 @font-face 規(guī)則在網(wǎng)頁中嵌入可下載字體的CSS功能，已經(jīng)得到了瀏覽器廣泛支持。該規(guī)則為設(shè)計(jì)師提供了系統(tǒng)自帶的字體以外的廣泛選擇。換句話說，瀏覽器可以從Web服務(wù)器下載字體，就意味著不必再依賴用戶機(jī)器中的字體，而且也可以確保用戶能夠看到CSS中設(shè)定的字體。
有以下三種：
使用 Google Web Fonts 或 Adobe 的 Typekit 等公共字體庫
使用事先打好包的@font-face 包
使用 Font Squirrel 用你自己的字體生成@font-face 包。
5.2 公共字體庫 5.3 打包的 @font-face 包 5.4 生成的 @font-face 包 5.5 文字版式文字版式講求勻稱，一般是由看不見的網(wǎng)格，框定頁面文字的走向和布局。勻稱的版式可以增強(qiáng)頁面的可讀性。
參考資料
CSS設(shè)計(jì)指南
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110967.html
摘要：在元素中使用元素是一個(gè)元素，沒有結(jié)束標(biāo)記表示鏈入的是樣式表，在中可省略不寫。一般頁面中，中文用宋體黑體微軟雅黑，英文使用。英文字體要放在最前面，中文字體后面的備選字體用逗號(hào)隔開。表示方法可用像素指定或使用或百分?jǐn)?shù)相對(duì)于字體大小指定。 一、基礎(chǔ)介紹 1， css：cascading style sheet 層疊式樣式表2， 語法：p {background-color:red...
摘要：為了解決沖突，確定哪條規(guī)則勝出并最終被應(yīng)用，提供了三種機(jī)制繼承層疊和特指。整個(gè)檢查更新過程結(jié)束后，再將每個(gè)標(biāo)簽以最終設(shè)定的樣式顯示出來。層疊規(guī)則四順序決定權(quán)重。規(guī)則三設(shè)定的樣式勝過繼承的樣式，此時(shí)不用考慮特指度即顯式設(shè)定優(yōu)先。 為了解決沖突，確定哪條規(guī)則勝出并最終被應(yīng)用，CSS提供了三種機(jī)制：繼承、層疊和特指。 1.繼承 CSS 中的祖先元素會(huì)向后代傳遞一樣?xùn)|西：CSS屬性...
摘要：我的郵箱地址歡迎大家交流學(xué)習(xí)糾錯(cuò)此篇博客是我的復(fù)習(xí)筆記，和學(xué)的時(shí)間太久了，忘得差不多了，最近要使用一下，所以重新打開的書略讀，后記錄了標(biāo)簽，元素，屬性的具體意義。有些標(biāo)記有屬性，具體格式，以標(biāo)記為例，其中為標(biāo)記的屬性。我的郵箱地址:[email protected]歡迎大家交流學(xué)習(xí)糾錯(cuò)！ 此篇博客是我的復(fù)習(xí)筆記，html和css學(xué)的時(shí)間太久了，忘得差不多了，最近要使用一下，所以重新打開htm...
摘要：將內(nèi)容在邊界內(nèi)換行不截?cái)嘤⑽膯卧~換行語法瀏覽器只在半角空格或連字符的地方進(jìn)行換行。個(gè)人感覺跟類似強(qiáng)行截?cái)嘤⑽膯卧~，達(dá)到詞內(nèi)換行效果。 CSS3文本 css字體類型屬性 font-family, font-style(normal、italic、oblique[傾斜]), font-weight, font-size-adjust(定義是否強(qiáng)制對(duì)文本使用同一尺寸,僅火狐支持), font...
摘要：在動(dòng)畫過程中，您能夠多次改變這套樣式。以百分比來規(guī)定改變發(fā)生的時(shí)間，或者通過關(guān)鍵詞和，等價(jià)于和。為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義和選擇器。注釋請(qǐng)使用動(dòng)畫屬性來控制動(dòng)畫的外觀，同時(shí)將動(dòng)畫與選擇器綁定。CSS3 被劃分為模塊 其中最重要的 CSS3 新增實(shí)用模塊包括： 背景和邊框 文本效果 2D/3D 轉(zhuǎn)換 動(dòng)畫 多列布局 用戶界面 CSS3 邊框: 用于創(chuàng)建圓角 border...
閱讀 1876·2023-04-25 19:51
閱讀 1181·2021-11-15 11:43
閱讀 4543·2021-11-02 14:40
閱讀 2008·2021-10-11 10:59
閱讀 1349·2021-09-22 15:05
閱讀 1038·2021-09-09 09:32
閱讀 660·2019-08-30 15:56
閱讀 560·2019-08-30 15:52
