## **字體屬性簡寫 font** [**font**](#font): （簡寫）在一個聲明中設置所有的字體屬性 用法1、可以用來作為 font-style, font-variant, font-weight, **font-size**（必須）, line-height 和 **font-family**（必須） 屬性的簡寫， 可設置的屬性是（按順序）： "font-style font-variant font-weight font-size/line-height font-family" ~~~ p.span{ ????font:15px?arial,sans-serif; } p.span{ ??? font: italic small-caps bold 16px/2 cursive; } ~~~ ## **所有CSS字體屬性** | 屬性 | 描述 | | -- | -- | | [ font-style](#font-style) | 指定文本的字體樣式，值：normal(常規)、italic（斜體）、oblique（傾斜體）、inherit（繼承父元素） | | [ font-variant](#font-variant) | 以小型大寫字體或者正常字體顯示文本。，兩個值normal（默認）和small-caps <br>small-caps 讓字母以小型方式顯示大寫<br>normal字母處于small-caps時恢復正常小寫狀態| |[ font-weight](#font-weight) | 指定字體的粗細，從600開始就能明顯看出粗體效果。值：normal（400）、bold（700）、bolder、lighter、100、200、300、400、500、600、700、800、900、inherit | |[ font-size](#font-size) | 指定文本的字體大小 | |[ line-height](#line-height) | 指定字體的粗細。 | |[ font-family](#font-family) | 指定文本的字體系列 | 用法2、將元素的字體設置為系統字體 >[danger]如果將 font 指定為系統關鍵字，則它必須是以下之一：caption, icon, menu, message-box, small-caption, status-bar。 | 系統字體 | 描述 | | --- | --- | |caption |定義被標題控件（比如按鈕、下拉列表等）使用的字體。| |icon |定義被圖標標記使用的字體。| |menu |定義被下拉列表使用的字體。| |message-box |定義被對話框使用的字體。| |small-caption |caption字體的小型版本。| |status-bar |定義被窗口狀態欄使用的字體。| ~~~ p.span{ ????font:small-caption; } ~~~ | 屬性 | 描述 | | -- | -- | | [ @font-face ](#@font-face )| 自定義自己的 Web?字體 | ~~~ @font-face { [ font-family: <family-name>; ] || [ src: <src>; ] || [ unicode-range: <unicode-range>; ] || [ font-variant: <font-variant>; ] || [ font-feature-settings: <font-feature-settings>; ] || [ font-variation-settings: <font-variation-settings>; ] || [ font-stretch: <font-stretch>; ] || [ font-weight: <font-weight>; ] || [ font-style: <font-style>; ] } ~~~ | 字體描述 | 值 | 說明 | | --- | --- | --- | | font-family | name | 必需的【IE6】。定義字體的名稱 | | src | url | 必需的【IE6】。定義該字體下載的網址 | | font-stretch | `normal`,`condensed`,`ultra-condensed`,`extra-condensed`,`semi-condensed`,`expanded`,`semi-expanded`,`extra-expanded`,`ultra-expanded` | 可選【IE9 Safari不支持】。定義該字體應該如何被拉長。默認值是"正常" | | font-style | `normal`,`italic`,`oblique` | 可選【IE4】。定義該字體應該是怎樣樣式。默認值是"正常" | | font-weight | `normal`,`bold`,`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900` | 可選【IE4】。定義字體的粗細。默認值是"正常" | | unicode-range | unicode-range | 可選【IE9】。在該@font-face中定義該字體支持Unicode字符的范圍。默認值是"ü+0-10 FFFF" | | [font-variant](#font-variant) | 兩個值normal（默認）和small-caps <br>small-caps 讓字母以小型方式顯示大寫（即大寫字母和小寫字母一樣大）<br>normal字母處于small-caps時恢復正常小寫狀態 | 可選，以小型大寫字體或者正常字體顯示文本。 | | [font-feature-settings](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-feature-settings) | normal 或者 string 1(on)/0(off) | 可選【IE10】，用于控制OpenType字體中的高級印刷功能 | | [font-variation-settings](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-variation-settings) | | 可選【IE不支持】，對[variable font](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)特征的低級控制，通過指定要更改的特征的四個字母軸名稱及其值 | format:指示瀏覽器對加載的這個字體用什么格式去解析，一般瀏覽器都能自動識別，加上是保險起見  ### 設置字體 ``` //定義多個字體重復font-face即可 @font-face { font-family:?myFirstFont; src:?url('http://www.w3cschool.css/css3/Sansation_Light.ttf') format("truetype"); } @font-face { font-family: 'iconfont';/*聲明一個名為iconfont的字體變量*/ src: url('../font/iconfont.eot'); src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), url('../font/iconfont.woff2') format('woff2'), url('../font/iconfont.woff') format('woff'), url('../font/iconfont.ttf') format('truetype'), url('../font/iconfont.svg#iconfont') format('svg'); } @font-face { font-family: testfont; src: url("fonts/test.otf") format("opentype"); } ``` 通常有以下幾種：truetype opentype truetype-aat embedded-opentype avg等 TrueType格式(.ttf) Windows和Mac上常見的字體格式 這是一種原始格式 因此并沒有為網頁進行優化處理 瀏覽器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+ OpenType格式(.otf) 以TrueType為基礎 也是一種原始格式 但提供了更多的功能 瀏覽器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+ Web Open Font格式(.woff) 針對網頁進行特殊優化 因此是Web字體中的最佳格式 它是一個開放的TrueType/OpenType的壓縮版 同時支持元數據包的分離 瀏覽器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+ Embedded Open Type格式(.eot) IE專用字體格式 可以從TrueType格式創建此格式字體 瀏覽器支持：IE4+ SVG格式(.svg) 基于SVG字體渲染的格式 瀏覽器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+ ### 使用字體 ~~~ body{ font-family:?myFirstFont;/*上面自定義的字體名或者系統自帶的字體名*/ } ~~~ <span id="font-style" style="font-weight: bold;color:blue">font-style</span> ``` <div> <span style="font-style: normal;">abc123</span> <span style="font-style: italic;">abc123</span> <span style="font-style: oblique;">abc123</span> <span style="font-style: inherit;">abc123</span> </div> ``` 效果： <div> <span style="font-style: normal;">ccc</span> <br> <span style="font-style: italic;">ccc</span> <br> <span style="font-style: oblique;">ccc</span> <br> <span style="font-style: inherit;">ccc</span> <br> </div> <span id="font-variant" style="font-weight: bold;color:blue">font-variant</span> 所謂“小型大寫”就是，即與小寫字母一樣高，外形與大寫字母保持一致 ``` <span style="font-variant: small-caps;">AAAaaa</span> <span style="font-variant: normal;">AAAaaa</span> ``` 效果： <div> <span style="font-variant: small-caps;">AAAaaa</span> <br> <span style="font-variant: normal;">AAAaaa</span> <br> </div> <span id="font-weight" style="font-weight: bold;color:blue">font-weight</span> ``` <span style="font-weight: normal">l</span> <span style="font-weight: bold">l</span> <span style="font-weight: bolder">l</span> <span style="font-weight: lighter">l</span> <br> <span style="font-weight: 100">l</span> <span style="font-weight: 200">l</span> <span style="font-weight: 300">l</span> <span style="font-weight: 400">l</span> <span style="font-weight: 500">l</span> <span style="font-weight: 600">l</span> <span style="font-weight: 700">l</span> <span style="font-weight: 800">l</span> <span style="font-weight: 900">l</span> ``` 效果： <div> <span style="font-weight: normal">l</span> <span style="font-weight: bold">l</span> <span style="font-weight: bolder">l</span> <span style="font-weight: lighter">l</span> <br> <span style="font-weight: 100">l</span> <span style="font-weight: 200">l</span> <span style="font-weight: 300">l</span> <span style="font-weight: 400">l</span> <span style="font-weight: 500">l</span> <span style="font-weight: 600">l</span> <span style="font-weight: 700">l</span> <span style="font-weight: 800">l</span> <span style="font-weight: 900">l</span> </div> <span id="font-size" style="font-weight: bold;color:blue">font-size</span> <span id="line-height" style="font-weight: bold;color:blue">line-height</span> <span id="font-family" style="font-weight: bold;color:blue">font-family</span> font-family 可以把多個字體名稱作為一個"回退"系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個 屬性值用逗號隔開。瀏覽器會選擇列表中第一個該計算機上有安裝的字體，或者是通過 @font-face 指定的可以直接下載的字體 有兩種類型的字體系列名稱： 1、family-name - 指定的系列名稱：具體字體的名稱（字體格式），比如："times"、"courier"、"arial"、"微軟雅黑"、"華文彩云"。 華文彩云效果：  2、generic-family - 通常字體系列名稱（字體分類）：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。 花 serif：襯線字體，每個字的筆畫末端都帶有以惡搞小勾  sans-serif：非襯線字體  monospace：等寬字體 cursive：草書字體  fantasy：虛幻字體  多個字體用逗號隔開，優先級從前到后，一般字體類別放到最后作為兜底前面字體都沒有的情況下選擇這個類別下存在的任何一個字體 ``` p{ font-family:"Times New Roman",Georgia,Serif; } ``` 一般微軟雅黑為第一選擇，用戶能不來了個顯示字體，取決于用戶的電腦是否安裝了這個字體（微軟雅黑是window自帶的），如果實在想要用偏門的字體，那么就需要在css引入該字體 ## 使用自己用@font-face設置的字體（這里設置字體就需要注意版權問題啦） ``` @font-face { font-family:?myFirstFont;//自定義引入的字體名 src:?url('http://www.w3cschool.css/css3/Sansation_Light.ttf') format("truetype"); } ``` 一般ttf格式絕大部分瀏覽器都支持，但是說不定那個奇葩就不支持呢，所以我們要引入其他格式（如svg、）  使用此字體（這里是建議用戶使用哪個字體） ~~~ body{ font-family:?myFirstFont; } ~~~ 推薦 ``` font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, "Hiragino Sans GB", "Heiti SC", Arial, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; ```