W3.CSS Fonts (字体)

2020-11-30 11:17 更新

易于阅读

W3.CSS 页面易于阅读,即使对于轻度阅读障碍者也是如此。

  • W3.CSS 默认字体大小为 15px
  • 默认字体为 Verdana,字母间距良好
  • 默认的行距(1.5)也很好

HTML 标题 <h1>-<h6>

默认情况下,W3.CSS 通过以下方式设置 HTML 标题的样式:

实例

<h1>标题1(36像素)</h1>

<h2>标题2(30像素)</h2>

<h3>标题3(24像素)</h3>

<h4>标题5(18像素)</h4>

<h5>Heading 5 (18px)</h5>

尝试一下 »
点击“尝试一下”按钮查看在线实例

字体大小类

标题应按原样使用:标题。

使用 W3.CSS,可以通过以下 w3- size 类设置字体大小:

实例

w3-large

w3-xlarge

w3-xxlarge

w3-xxxlarge

w3-jumbo


尝试一下 »
点击“尝试一下”按钮查看在线实例

覆盖 W3.CSS 默认值

覆盖 W3.CSS 默认设置非常容易。

您至少有三个选择:

  1. 覆盖页面 <head> 部分中的默认设置
  2. 在 W3.CSS 之后添加自己的 CSS 文件
  3. 下载并更改 W3.CSS 文件的内容

覆盖 <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

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" 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}


更改默认页面字体

加载 W3.CSS 之后,在网页的顶部(或样式表中),更改 html 和 body 的样式:

实例

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" 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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS 外部字体

使用 W3.CSS,将新字体添加到网页非常容易。

  • 非常易于使用(仅 CSS 和 HTML)
  • 无限使用外部字体库(如 Google 字体)
  • 适用于所有现代浏览器

使用字体类

在网页的顶部(或样式表中),创建一个字体类:

实例

.w3-myfont {

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

}

在网页的正文中,使用字体类名称:

实例

<body>

  <p class="w3-myfont">制作网页!</p>

</body>


尝试一下 »
点击“尝试一下”按钮查看在线实例

使用外部字体

在网页的顶部,包括一个外部字体,并给该字体一个类名:

实例

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine" rel="external nofollow" target="_blank" >

<style>

.w3-tangerine {

  font-family: 'Tangerine', serif;

}

</style>

在网页的正文中,使用类名称:

实例

<body>

  <p class="w3-tangerine">使网页更加美观!</p>

</body>


尝试一下 »
点击“尝试一下”按钮查看在线实例

更多例子

实例

<link rel="stylesheet"

href="https://fonts.googleapis.com/css?family=Lobster" rel="external nofollow" target="_blank" >


尝试一下 »
点击“尝试一下”按钮查看在线实例

实例

<link rel="stylesheet"

href="https://fonts.googleapis.com/css?family=Lobster&effect=brick-sign" rel="external nofollow" target="_blank" >


尝试一下 »
点击“尝试一下”按钮查看在线实例

实例

<link rel="stylesheet"

href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="external nofollow" target="_blank" >


尝试一下 »
点击“尝试一下”按钮查看在线实例

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


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号