閱讀(2.9k) 書簽贊(0) 我要糾錯

W3.CSS Fonts (字體)

2021-07-01 09:27 更新

易于閱讀

W3.CSS 頁面易于閱讀，即使對于輕度閱讀障礙者也是如此。

W3.CSS 默認字體大小為 15px
默認字體為 Verdana，字母間距良好
默認的行距（1.5）也很好

HTML 標題 <h1>-<h6>

默認情況下，W3.CSS 通過以下方式設(shè)置 HTML 標題的樣式：

實例

<h1>標題1（36像素）</h1>

<h2>標題2（30像素）</h2>

<h3>標題3（24像素）</h3>

<h4>標題5（18像素）</h4>

<h5>標題5（18像素）</h5>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

字體大小類

標題應(yīng)按原樣使用：標題。

使用 W3.CSS，可以通過以下 w3- size 類設(shè)置字體大小：

實例

w3-large

w3-xlarge

w3-xxlarge

w3-xxxlarge

w3-jumbo

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

覆蓋 W3.CSS 默認值

覆蓋 W3.CSS 默認設(shè)置非常容易。

您至少有三個選擇：

覆蓋頁面 <head> 部分中的默認設(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;}

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

添加自己的 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}

更改默認頁面字體

加載 W3.CSS 之后，在網(wǎng)頁的頂部（或樣式表中），更改 html 和 body 的樣式：

實例

<style>

html, body, h1, h2, h3, h4, h5, h6 {

font-family: "Comic Sans MS", cursive, sans-serif;

}

</style>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

W3.CSS 外部字體

使用 W3.CSS，將新字體添加到網(wǎng)頁非常容易。

非常易于使用（僅 CSS 和 HTML）
無限使用外部字體庫（如 Google 字體）
適用于所有現(xiàn)代瀏覽器

使用字體類

在網(wǎng)頁的頂部（或樣式表中），創(chuàng)建一個字體類：

實例

.w3-myfont {

font-family: "Comic Sans MS", cursive, sans-serif;

}

在網(wǎng)頁的正文中，使用字體類名稱：

實例

<body>

</body>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

使用外部字體

在網(wǎng)頁的頂部，包括一個外部字體，并給該字體一個類名：

實例

<style>

.w3-tangerine {

font-family: 'Tangerine', serif;

}

</style>

在網(wǎng)頁的正文中，使用類名稱：

實例

<body>

<p class="w3-tangerine">使網(wǎng)頁更加美觀！</p>

</body>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

更多例子

實例

rel="external nofollow" target="_blank" >

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

實例

rel="external nofollow" target="_blank" >

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

實例

rel="external nofollow" target="_blank" >

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

字體效果在Internet Explorer 9及更早版本中不起作用。

以上內(nèi)容是否對您有幫助：

← W3.CSS Cards (卡片)

W3.CSS Texts (文本) →

寫筆記

我要補充

W3.CSS Fonts (字體)

易于閱讀

HTML 標題 <h1>-<h6>

實例

<h1>標題1（36像素）</h1>

<h2>標題2（30像素）</h2>

<h3>標題3（24像素）</h3>

<h4>標題5（18像素）</h4>

<h5>標題5（18像素）</h5>

字體大小類

實例

w3-xlarge

w3-xxlarge

w3-xxxlarge

w3-jumbo

覆蓋 W3.CSS 默認值

覆蓋 <head>

添加自己的 CSS

更改 W3.CSS

更改默認頁面字體

實例

W3.CSS 外部字體

使用字體類

實例

實例

使用外部字體

實例

實例

實例

實例

實例

字體效果在Internet Explorer 9及更早版本中不起作用。

推薦文章

推薦教程

推薦課程

字體效果在Internet Explorer 9及更早版本中不起作用。