目录
一、设置字体名
1、演示效果
2、编写源码
二、设置字号
1、使用单位设置字号
（1）常用单位
（2）案例演示
（3）编写代码
2、使用关键字设置字号
（1）绝对关键字
（2）相对关键字
一、设置字体名
1、演示效果
2、编写源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
#p1 {
font-family: sans-serif;
font-size: 3em;
}
#p2 {
font-family: Verdana;
font-size: 2em;
}
#p3 {
font-family: monospace;
font-size: 2em;
}
#p4 {
font-family: cursive;
font-size: 2em;
}
#p5 {
font-family: fantasy;
font-size: 2em;
}
#p6 {
font-family: "Courier New", "Andale Mono", monospace;
font-size: 2em;
}
</style>
</head>
<body>
<p id="p1">I love you. -- sans-serif</p>
<p id="p2">I love you. -- Verdana</p>
<p id="p3">I love you. -- monospace</p>
<p id="p4">I love you. -- cursive</p>
<p id="p5">I love you. -- fantasy</p>
<p id="p6">I love you. -- Courier New, Andale Mono, monospace</p>
</body>
</html>
首先考虑Courier New字体，如果系统安装了该字体，那就按照该字体显示，否则考虑列表中的下一个字体，如果都没有安装，那么就按最后一个字体来显示。
二、设置字号
1、使用单位设置字号
（1）常用单位
You should avoid using points and picas to style text for display on screen. This unit is an excellent way to set font sizes for print design, as the point measurement was created for that purpose. A point has a fixed size of 1/72nd of an inch, while a pica is one-sixth of an inch.
你应该避免使用point和pica单位设置屏幕显示文本的样式。这个单位是设置打印设计的字号的极好方式，因为point度量就是为那个目的而创建的。一个point是七十二分之一英寸，一个pica是六分之一英寸。(1pc=12pt)
Many designers like to set font sizes in pixel measurements, as this unit makes it easy to achieve consistent text displays across various browsers and platforms. However, pixel measurements ignore any preferences users may have set in their own browsers.
很多设计者喜欢用pixel度量来设置字号，因为这个单位容易在不同浏览器和平台上达成一致的文本显示效果。然后，pixel度量会忽略用户在他们浏览器上设置的任何偏好。
The em is a relative font measurement. The name em comes from the world of typography, where it relates to the size of the capital letter M, usually the widest character in a font. In CSS 1em is seen to be equal to the user’s default font size, or the font size of the parent element when it is set to a value other than the default.
em是一个相对字体度量。em名称来自于印刷术，跟大写字母M的尺寸相关，字母M通常是一种字体中最宽的字符。在CSS里，1em等于与用户默认字号，或者父元素的字号，当父元素的字号不采用默认值而设置了一个值。
If you use ems (or any other relative unit) to set all your font sizes, users will be able to resize the text, which will comply with the text size preferences they have set in their browsers.
如果使用em（或任何其它相对单位）来设置你全部的字号，用户将能够调整文本的大小，这会和他们在浏览器里设置的文本尺寸偏好保持一致。
Em values can be set using decimal numbers. em值可以设置为小数。比如 p{font-size: 0.9em;} 或 p{font-size: 1.1em;}
The ex is a relative unit measurement that corresponds to the height of the lowercase letter x in the default font size. In theory, if you set the font-size of a paragraph to 1ex, the uppercase letters in the text will display at the height at which the lowercase letter x would have appeared if the font size had been unspecified.
As with ems and exes, font sizes that are set in percentages will honor users’ text size settings and can be resized by the user. Setting the size of a p element to 100% will display your text at users’ default font size settings (as will setting the font size to 1em).
p{font-size: 100%} p{font-size: 90%} p{font-size: 110%}
等价于
p{font-size: 1em} p{font-size: 0.9em} p{font-size: 1.1em}（2）案例演示
（3）编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>字号单位演示</title>
<style type="text/css">
#p0 {
font-size: 1pc;
}
#p1 {
font-size: 12pt;
}
#p2 {
font-size: 16px;
}
#p3 {
font-size: 1em;
}
#p4 {
font-size: 1ex;
}
#p5 {
font-size: 100%;
}
#p6 {
font-size: 1rem;
}
.note {
width: 50%;
height: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<p id="p0">I love you. -- 1pc</p>
<p id="p1">I love you. -- 12pt</p>
<p id="p2">I love you. --16px</p>
<p id="p3">I love you. --1em</p>
<p id="p4">I love you. --1ex</p>
<p id="p5">I love you. --100%</p>
<p id="p6">I love you. --1rem</p>
<hr/>
<div class="note">
<ol>
<li>1pc = 1/6 inch, 1pt = 1/72 inch ==> 1pc=12pt</li>
<li>1pc = 12pt = 16px = 1em</li>
<li>pc、pt、px都是绝对度量单位。</li>
<li>em、ex、percentage都是相对度量单位。</li>
<li>em相对于大写字母M进行度量，ex相对于小写字母x进行度量。</li>
<li>em是相对直接父元素进行度量，rem是相对于顶级父元素进行度量。</li>
</ol>
</div>
</body>
</html>2、使用关键字设置字号
（1）绝对关键字
medium、large、x-large、xx-large
These keywords are defined relative to each other, and browsers implement them in different ways. Most browsers display medium at the same size as unstyled text, with the other keywords resizing text accordingly, as indicated by their names to varying degrees. 绝大多数浏览器将未样式化的文本显示为medium字号，其余关键字相应地调整文本尺寸。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字号绝对关键字</title>
<style type="text/css">
#p0 {
font-size: xx-small;
}
#p1 {
font-size: x-small;
}
#p2 {
font-size: small;
}
#p3 {
font-size: medium;
}
#p4 {
font-size: large;
}
#p5 {
font-size: x-large;
}
#p6 {
font-size: xx-large;
}
</style>
</head>
<body>
<p id="p0">I love you. -- xx-small</p>
<p id="p1">I love you. -- x-small</p>
<p id="p2">I love you. -- small</p>
<p id="p3">I love you. -- medium</p>
<p id="p4">I love you. -- large</p>
<p id="p5">I love you. -- x-large</p>
<p id="p6">I love you. -- xx-large</p>
</body>
</html>（2）相对关键字
larger, smaller 类似与em与%，都是相对于父元素字号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字号相对关键字</title>
<style type="text/css">
p{
font-size: 2em;
font-family: "Times New Roman";
}
weak {
font-size: smaller;
color: #f0ad4e;
}
em {
font-size: larger;
color: red;
}
</style>
</head>
<body>
<p>
Last year, when he was searching for people to invest in his company,
he wanted <weak>someone</weak> who knew the <em>Chinese</em> market.
</p>
</body>
</html>
采用相对字号度量容易遇到的问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对字号度量遇到的问题</title>
<style type="text/css">
div, p, em, a, code {
font-size: 130%;
}
.note {
width: 100%;
height: 300px;
overflow-y: scroll;
border: 1px solid lightgrey;
border-radius: 5px;
}
</style>
</head>
<body>
<div>
<p>
You'll <em>probably</em> be surprised when using
<a href="#">a relative <code>font-size</code></a>
and nested elements.
</p>
</div>
<div class="note">
<pre>
div, p, em, a, code {
font-size: 130%;
}
</pre>
<hr/>
<pre>
<p>You'll <em>probably</em> be surprised when using
<a href="#">a relative <code>font-size</code></a>
and nested elements. </p>
</pre>
说明：div字号是默认字号的130%，其子元素p的字号是div字号的130%，就是默认字号的169%；然后em、a、code三个元素又是p元素的子元素，其字号是p元素字号的130%，那就是默认字号的219.7%。
</div>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
