极客笔记HTML5-字体参考
在HTML5中，字体的选用可以使用旧版HTML中的<font>标签，但是more recommended的方法是使用CSS样式。在这篇文章中，我们将介绍HTML5中的字体标签以及如何使用CSS来定义字体。
HTML5字体标签
以下是HTML5中的字体标签：
\ 标签
使用<em>标签可以将text强调或重音化，浏览器通常会用斜体来显示它。
<p>Today is <em>windy</em> day.</p>
\ 标签
使用<strong>标签可以将text标记为重要，浏览器通常使用粗体来显示它。
<p><strong>This</strong> is important.</p>
\ 标签
使用<mark>标签可以高亮文本。
<p>Do not forget to buy <mark>milk</mark> on your way back.</p>
\ 标签
使用<small>标签可以将text设置为较小的font size。
<p><small>This text is small.</small></p>
CSS字体样式
font-family
使用font-family属性可以指定所选字体的font family，如sans-serif、serif或monospace。你还可以指定字体的具体名称：
p {
font-family: Arial, sans-serif;
}
font-size
使用font-size可以指定所选字体的大小：
p {
font-size: 16px;
}
字号可以使用百分比或像素值。你还可以使用em值，它是相对于父元素字体的大小而计算的。
p {
font-size: 110%;
font-size: 0.8em;
}
font-style
使用font-style可以设置font的样式：
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
font-weight
使用font-weight可以设置字体的粗细：
p.normal {
font-weight: normal;
}
p.bold {
font-weight: bold;
}
font-variant
font-variant可以设置字体的变体，包括small-caps：
p {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
font
CSS的font属性可包含所有以上属性。以下是一个font属性值的简略版：
p {
font: font-style font-variant font-weight font-size/line-height font-family;
}
这个值可以指定所选字体的样式、粗细、大小、font family和line height。
自定义字体
CSS3中引入了@font-face属性，使开发人员可以在Web 中使用自定义字体。
@font-face {
font-family: customfont;
src: url(fonts/customfont.ttf);
}
p {
font-family: customfont;
}
我们使用@font-face来定义字体的名称和其在服务器上的位置。src属性可以指向字体文件，这可以是一个外部URL或一个相对的服务器地址。然后我们在需要的元素中，只要调用自定义字体名称即可。
Google Fonts
除了使用自定义字体，你还可以从Google Fonts中选择一种已经被优化的字体。
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
我们将此链接放在HTML文档的head部分。然后我们可以将该字体应用于我们的文本：
p {
font-family: 'Open Sans', sans-serif;
}
总结
在HTML5中，有多种方法可以定制字体，我们可以使用旧版HTML中的字体标签，利用CSS来定义字体样式，也可以使用@font-face自定义字体或从Google Fonts中选择字体。通过对字体的精细处理，我们可以为我们的网站定制一个独特和吸引人的外观。同时，记得保持字体的可读性，这是确保文章易于阅读的关键。