整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
言
頁(yè)面總少不了字體吧，字體還有家族font-family，那好吧
字體格式
TTF (TrueType Font) 字體格式是由蘋(píng)果和微軟為 PostScript 而開(kāi)發(fā)的字體格式。在 Mac 和 Windows 操作系統(tǒng)上，TTF 一直是最常見(jiàn)的格式，所有主流瀏覽器都支持它。然而，IE8 不支持 TTF；且 IE9 上只有被設(shè)置成 "installable" 才能支持（譯注：別想了，轉(zhuǎn)別的格式吧）。
TTF 允許嵌入最基本的數(shù)字版權(quán)管理標(biāo)志————內(nèi)置標(biāo)志可以告訴我們字體作者是否允許改字體在 PDF 或者網(wǎng)站等處使用，所以可能會(huì)有版權(quán)問(wèn)題。另一個(gè)缺點(diǎn)是，TTF 和 OTF 字體是沒(méi)壓縮的，因此他們文件更大。
OTF (OpenType Font) 由 TTF 演化而來(lái)，是 Adobe 和微軟共同努力的結(jié)果。OTF 字體包含一部分屏幕和打印機(jī)字體數(shù)據(jù)。OTF 有幾個(gè)獨(dú)家功能，包括支持多平臺(tái)和擴(kuò)展字符集。OTF 字體可以在 Macintosh 和 Windows 系統(tǒng)上使用。
OTF 也允許多達(dá) 65000 個(gè)字符的存儲(chǔ)。這個(gè)額外的空間讓設(shè)計(jì)師可以自由地添加附加元素，比如小帽子、老式數(shù)字體、代替的字符和其他一些以前必須作為獨(dú)立字體分發(fā)的附加材料。
實(shí)踐
1、CSS引入TTF或OTF文件
@font-face {
font-family: HansKendrick-Regular;
src:url('../fonts/HansKendrick-Regular.otf');
}
備注：
otf文件由設(shè)計(jì)同學(xué)提供或自行下載。
url使用的是相對(duì)路徑。絕對(duì)路徑測(cè)不管是放在public還是src下均沒(méi)有測(cè)試成功。2、CSS樣式的使用
font-family: 'HansKendrick-Regular';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
text-align: center;
color: rgba(255, 255, 255, 0.8);
備注：以上是樣例，根據(jù)實(shí)際情況配置即可。資料來(lái)源：
SS字體屬性定義字體，加粗，大小，文字樣式。
serif和sans-serif字體之間的區(qū)別
在計(jì)算機(jī)屏幕上，sans-serif字體被認(rèn)為是比serif字體容易閱讀
CSS字型
在CSS中，有兩種類型的字體系列名稱：
通用字體系列 - 擁有相似外觀的字體系統(tǒng)組合（如 "Serif" 或 "Monospace"）
特定字體系列 - 一個(gè)特定的字體系列（如 "Times" 或 "Courier"）
| Generic family | 字體系列 | 說(shuō)明 |
|---|---|---|
| Serif | Times New RomanGeorgia | Serif字體中字符在行的末端擁有額外的裝飾 |
| Sans-serif | ArialVerdana | "Sans"是指無(wú) - 這些字體在末端沒(méi)有額外的裝飾 |
| Monospace | Courier NewLucida Console | 所有的等寬字符具有相同的寬度 |
字體系列
font-family 屬性設(shè)置文本的字體系列。
font-family 屬性應(yīng)該設(shè)置幾個(gè)字體名稱作為一種"后備"機(jī)制，如果瀏覽器不支持第一種字體，他將嘗試下一種字體。
注意: 如果字體系列的名稱超過(guò)一個(gè)字，它必須用引號(hào)，如Font Family："宋體"。
多個(gè)字體系列是用一個(gè)逗號(hào)分隔指明：
實(shí)例
p{font-family:"Times New Roman", Times, serif;}
對(duì)于較常用的字體組合，看看我們的 Web安全字體組合。
字體樣式
主要是用于指定斜體文字的字體樣式屬性。
這個(gè)屬性有三個(gè)值：
正常 - 正常顯示文本
斜體 - 以斜體字顯示的文字
傾斜的文字 - 文字向一邊傾斜（和斜體非常類似，但不太支持）
實(shí)例
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字體大小
font-size 屬性設(shè)置文本的大小。
能否管理文字的大小，在網(wǎng)頁(yè)設(shè)計(jì)中是非常重要的。但是，你不能通過(guò)調(diào)整字體大小使段落看上去像標(biāo)題，或者使標(biāo)題看上去像段落。
請(qǐng)務(wù)必使用正確的HTML標(biāo)簽，就<h1> - <h6>表示標(biāo)題和<p>表示段落：
字體大小的值可以是絕對(duì)或相對(duì)的大小。
絕對(duì)大小：
設(shè)置一個(gè)指定大小的文本
不允許用戶在所有瀏覽器中改變文本大小
確定了輸出的物理尺寸時(shí)絕對(duì)大小很有用
相對(duì)大小：
相對(duì)于周圍的元素來(lái)設(shè)置大小
允許用戶在瀏覽器中改變文字大小
如果你不指定一個(gè)字體的大小，默認(rèn)大小和普通文本段落一樣，是16像素（16px=1em）。
設(shè)置字體大小像素
設(shè)置文字的大小與像素，讓您完全控制文字大小：
實(shí)例
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通過(guò)縮放瀏覽器調(diào)整文本大小。
雖然可以通過(guò)瀏覽器的縮放工具調(diào)整文本大小，但是，這種調(diào)整是整個(gè)頁(yè)面，而不僅僅是文本
用em來(lái)設(shè)置字體大小
為了避免Internet Explorer 中無(wú)法調(diào)整文本的問(wèn)題，許多開(kāi)發(fā)者使用 em 單位代替像素。
em的尺寸單位由W3C建議。
1em和當(dāng)前字體大小相等。在瀏覽器中默認(rèn)的文字大小是16px。
因此，1em的默認(rèn)大小是16px。可以通過(guò)下面這個(gè)公式將像素轉(zhuǎn)換為em：px/16=em
實(shí)例
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
嘗試一下 ?
在上面的例子，em的文字大小是與前面的例子中像素一樣。不過(guò)，如果使用 em 單位，則可以在所有瀏覽器中調(diào)整文本大小。
不幸的是，仍然是IE瀏覽器的問(wèn)題。調(diào)整文本的大小時(shí)，會(huì)比正常的尺寸更大或更小。
使用百分比和EM組合
在所有瀏覽器的解決方案中，設(shè)置 <body>元素的默認(rèn)字體大小的是百分比：
實(shí)例
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
我們的代碼非常有效。在所有瀏覽器中，可以顯示相同的文本大小，并允許所有瀏覽器縮放文本的大小。
更多實(shí)例
設(shè)置字體加粗
這個(gè)例子演示了如何設(shè)置字體的加粗。
可以設(shè)置字體的轉(zhuǎn)變
這個(gè)例子演示了如何設(shè)置字體的轉(zhuǎn)變。
在一個(gè)聲明中的所有字體屬性
本例演示如何使用簡(jiǎn)寫(xiě)屬性將字體屬性設(shè)置在一個(gè)聲明之內(nèi)。
所有CSS字體屬性
| Property | 描述 |
|---|---|
| font | 在一個(gè)聲明中設(shè)置所有的字體屬性 |
| font-family | 指定文本的字體系列 |
| font-size | 指定文本的字體大小 |
| font-style | 指定文本的字體樣式 |
| font-variant | 以小型大寫(xiě)字體或者正常字體顯示文本。 |
| font-weight | 指定字體的粗細(xì)。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
SS屬性值 字體與文本
網(wǎng)頁(yè)設(shè)計(jì)中有很多的文字要去處理，標(biāo)題、段落、文章、列表以及表單中的文本。這一篇章我們討論一下HTML中的字體與文本
字體
首先要有一個(gè)認(rèn)識(shí)字體和文本不是一個(gè)東西哦。字體是不同的文本體式或者可以說(shuō)是字的形體結(jié)構(gòu)。對(duì)于英文來(lái)說(shuō)有很多種不同的樣式包括字母、數(shù)字和符號(hào)組成的。
文本指的是通過(guò)文本屬性描述對(duì)文本的處理方式。行高，字符間距，縮進(jìn)等。
那么網(wǎng)頁(yè)中的字體是哪里來(lái)的呢？其中有哪些屬性？文本屬性中有哪些小秘密吶？
來(lái)源
用戶機(jī)器中安裝的字體
保存在第三方網(wǎng)站上的字體（link）
保存在服務(wù)器上的字體。這些字體可以使用@font-face規(guī)則隨網(wǎng)頁(yè)一起發(fā)給瀏覽器（一般字體圖片都會(huì)放到一個(gè)單獨(dú)的服務(wù)器上，更加的優(yōu)化）
字體屬性
font-family
字體族
font-family用于設(shè)定元素中的文本使用什么字體。通常給一個(gè)文檔頁(yè)面設(shè)置一個(gè)主字體（因?yàn)?span>font-family是可以繼承的），然后針對(duì)那些需要使用不用樣式的字體在單獨(dú)應(yīng)用font-family。
因?yàn)樽煮w來(lái)源我們已經(jīng)知道了，兩條路徑要么是用戶機(jī)器，要么是網(wǎng)上，那么就存在某種字體不能再某個(gè)網(wǎng)頁(yè)中使用的可能。所以需要給出一組字體，這組字體叫做字體棧 。
簡(jiǎn)單的來(lái)說(shuō)就是就是預(yù)備隊(duì)，如果用戶機(jī)器上沒(méi)有某種字體，預(yù)備的字體就用作用了，用戶還可以使用另一種字體閱讀。
/*
font-family的值不區(qū)分大小寫(xiě) 但是如果引入的是在線字體庫(kù)請(qǐng)不要隨意修改
有可能導(dǎo)致無(wú)法使用提供的定制字體
*/
body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif；}font-size
字體大小
瀏覽器樣式表默認(rèn)為每個(gè)HTML元素都設(shè)定了font-size，言外之意是我們?cè)谠O(shè)置font-size的時(shí)候其實(shí)是在修改默認(rèn)值。字體大小的單位px、%、em。但是有一個(gè)很重要的點(diǎn)是字體的大小也是可以去繼承的這個(gè)地方可能會(huì)出現(xiàn)一些未知的錯(cuò)誤。
px是一個(gè)很常見(jiàn)的單位，em也是一個(gè)單位有什么區(qū)別呢？
px是絕對(duì)單位，em是一種相對(duì)單位與百分比是一樣的，瀏覽器默認(rèn)樣式表在設(shè)定所有元素的字體大小時(shí)使用的都是相對(duì)單位em，h1被設(shè)定為2em，h2是1.5em，p是1em。默認(rèn)情況下1em = 16px。這也是font-size的基準(zhǔn)大小。
example 1
1 2 3 4 5 6 7 8 9 10 11 | <style>
/* h1此時(shí)2em */
body{font-size: 200%;}
/* h1此時(shí)應(yīng)該是多少呢？ */
body{font-size: 20px;}
p{font-size: 16px;}
</style>
<body>
<h1>我是誰(shuí)</h1>
<p>font-size</p>
</body> |
tip：其它的以絕對(duì)單位設(shè)定的會(huì)重新設(shè)定字體的大小，不會(huì)產(chǎn)生繼承。同時(shí)我們?cè)谠O(shè)定的時(shí)候可以選擇關(guān)鍵字值，比如x-small，medium，x-large等等 ，當(dāng)然用的很少，你會(huì)在瀏覽器看到medium感興趣的可以去觀察一下吧。
example 2
1 2 3 4 5 6 7 | <style>
/* span的字體大小是多少呢? */
p{font-size： 80%;}
</style>
<body>
<p>我是<span>小貴</span></p>
</body> |
example 3
1 2 3 4 5 6 7 8 9 10 | <style>
/* h1的字體大小是多少呢？ */
/* span的字體大小是多少呢? */
body{font-size: 150%;}
p{font-size： 80%;}
</style>
<body>
<h1>我是小小</h1>
<p>我是<span>小小</span></p>
</body> |
tip：使用絕對(duì)單位的好處是，在祖先元素的字體大小變化時(shí)，不會(huì)出現(xiàn)意外的連鎖反應(yīng)。
font-style
字體樣式
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)值。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體樣式。 |
| italic | 瀏覽器會(huì)顯示一個(gè)斜體的字體樣式。（斜體代表強(qiáng)調(diào)含義所以還是用em） |
| oblique | 瀏覽器會(huì)顯示一個(gè)傾斜的字體樣式。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承字體樣式。 |
font-weight
字體粗細(xì)
這個(gè)貌似沒(méi)什么好說(shuō)的，還是過(guò)了吧。主要一點(diǎn)最好使用bold，normal當(dāng)然strong標(biāo)簽是加粗的狀態(tài)，你們應(yīng)該懂我的意思。
font-variant
字體變化
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)值。瀏覽器會(huì)顯示一個(gè)標(biāo)準(zhǔn)的字體。 |
| small-caps | 瀏覽器會(huì)顯示小型大寫(xiě)字母的字體。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 font-variant 屬性的值。 |
font
簡(jiǎn)寫(xiě)，復(fù)合寫(xiě)法
強(qiáng)調(diào)兩個(gè)規(guī)則
rule
必須聲明size與family。
順序 font-weight、font-style、font-variant隨意調(diào)換，其次font-size，font-family。
同時(shí)還可以設(shè)置行高 font:bold italic small-caps 16px/1.5 ‘Microsoft yahei’ 16px/1.5的這個(gè)1.5代表的是倍數(shù)。
今天就分享到這，明天在分享！
如果你們想要了解或者想要深入學(xué)習(xí)java和web可以進(jìn)我的群里進(jìn)行交流學(xué)習(xí),群號(hào)：web330336289，java644038439。歡迎我們進(jìn)去交流學(xué)習(xí)，我們一同學(xué)習(xí)一同行進(jìn)，我覺(jué)得程序員不應(yīng)該中止腳步，而是一向在學(xué)習(xí)的道路上一向行進(jìn)。
編碼：天弘
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
