免費(fèi)AI編程助手
W3.CSS Fonts (字體)
易于閱讀
W3.CSS 頁(yè)面易于閱讀，即使對(duì)于輕度閱讀障礙者也是如此。
- W3.CSS 默認(rèn)字體大小為 15px
- 默認(rèn)字體為 Verdana，字母間距良好
- 默認(rèn)的行距（1.5）也很好
HTML 標(biāo)題 <h1>-<h6>
默認(rèn)情況下，W3.CSS 通過(guò)以下方式設(shè)置 HTML 標(biāo)題的樣式：
實(shí)例
<h1>標(biāo)題1（36像素）</h1>
<h2>標(biāo)題2（30像素）</h2>
<h3>標(biāo)題3（24像素）</h3>
<h4>標(biāo)題5（18像素）</h4>
<h5>標(biāo)題5（18像素）</h5>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
字體大小類(lèi)
標(biāo)題應(yīng)按原樣使用：標(biāo)題。
使用 W3.CSS，可以通過(guò)以下 w3- size 類(lèi)設(shè)置字體大?。?/p>
覆蓋 W3.CSS 默認(rèn)值
覆蓋 W3.CSS 默認(rèn)設(shè)置非常容易。
您至少有三個(gè)選擇：
- 覆蓋頁(yè)面 <head> 部分中的默認(rèn)設(shè)置
- 在 W3.CSS 之后添加自己的 CSS 文件
- 下載并更改 W3.CSS 文件的內(nèi)容
覆蓋 <head>
h1{font-size:64px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:18px;}
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
添加自己的 CSS
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<link rel="stylesheet" href="myStyle.css">
更改 W3.CSS
h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}
更改默認(rèn)頁(yè)面字體
加載 W3.CSS 之后，在網(wǎng)頁(yè)的頂部（或樣式表中），更改 html 和 body 的樣式：
實(shí)例
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<style>
html, body, h1, h2, h3, h4, h5, h6 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
W3.CSS 外部字體
使用 W3.CSS，將新字體添加到網(wǎng)頁(yè)非常容易。
- 非常易于使用（僅 CSS 和 HTML）
- 無(wú)限使用外部字體庫(kù)（如 Google 字體）
- 適用于所有現(xiàn)代瀏覽器
使用字體類(lèi)
在網(wǎng)頁(yè)的頂部（或樣式表中），創(chuàng)建一個(gè)字體類(lèi)：
實(shí)例
.w3-myfont {
font-family: "Comic Sans MS", cursive, sans-serif;
}
在網(wǎng)頁(yè)的正文中，使用字體類(lèi)名稱(chēng)：
使用外部字體
在網(wǎng)頁(yè)的頂部，包括一個(gè)外部字體，并給該字體一個(gè)類(lèi)名：
實(shí)例
<link rel="stylesheet" rel="external nofollow" target="_blank" >
<style>
.w3-tangerine {
font-family: 'Tangerine', serif;
}
</style>
在網(wǎng)頁(yè)的正文中，使用類(lèi)名稱(chēng)：
實(shí)例
<body>
<p class="w3-tangerine">使網(wǎng)頁(yè)更加美觀！</p>
</body>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
更多例子
實(shí)例
<link rel="stylesheet"
rel="external nofollow" target="_blank" >
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
實(shí)例
<link rel="stylesheet"
rel="external nofollow" target="_blank" >
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
實(shí)例
<link rel="stylesheet"
rel="external nofollow" target="_blank" >
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
字體效果在Internet Explorer 9及更早版本中不起作用。
更多建議：