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