codecamp

W3.CSS Fonts (字体)


易于阅读

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>标题5(18像素)</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">

<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">

<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">

<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">


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

实例

<link rel="stylesheet"

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


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

实例

<link rel="stylesheet"

href="https://fonts.googleapis.com/css?family=Allerta+Stencil">


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

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



W3.CSS Cards (卡片)
W3.CSS Texts (文本)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }