W3.CSS Fonts (字體)

2021-07-01 09:27 更新

易于閱讀

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 通過以下方式設(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í)例

字體大小類

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

使用 W3.CSS，可以通過以下 w3- size 類設(shè)置字體大?。?/p>

實(shí)例

w3-large

w3-xlarge

w3-xxlarge

w3-xxxlarge

w3-jumbo


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

覆蓋 W3.CSS 默認(rèn)值

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

您至少有三個(gè)選擇：

  1. 覆蓋頁(yè)面 <head> 部分中的默認(rèn)設(shè)置
  2. 在 W3.CSS 之后添加自己的 CSS 文件
  3. 下載并更改 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)代瀏覽器

使用字體類

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

實(shí)例

.w3-myfont {

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

}

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

實(shí)例

<body>

  <p class="w3-myfont">制作網(wǎng)頁(yè)！</p>

</body>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

使用外部字體

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

實(shí)例

<link rel="stylesheet"  rel="external nofollow" target="_blank" >

<style>

.w3-tangerine {

  font-family: 'Tangerine', serif;

}

</style>

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

實(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及更早版本中不起作用。



以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)