font-face属性

@font-face告诉浏览器加载css属性的字体，字体的命名用font-famil来决定

@font-face {
	font-family: "Emblema One";
	src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"), 
	     url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf"); 
}

h1用 "Emblema One"字体，如果加载不进来就要用后面的sans-serif字体。

h1 {
  font-family:     "Emblema One", sans-serif;
  font-size:       220%;
}

@font-face算是内置规则，并不是选择器规则。

利用font-face分配一个font-family名。

还有其他需要了解内置css规则，@import和@media

其他选择器

@import准许导入其他css文件

@media导入媒体类型的css规则，如印刷页，桌面屏幕或手机。

调整字体大小

px

可以按照像素大小来确定文字的大小px

font-size:14px;

在body规则中指定是这样

body{
	font-size:14px;
}

%

百分比也可以调整字体的大小

font-size：150%；

用到百分比就说明大小应当是另外一个字体大小的150%，另外的字体是什么呢？

body{
	font-size:14px;
}
h1{
	font-size:150%；
}

这里的h1字体150%大小是根据html父标签body来确定的。

em

比例因子

font-size：1.2em

em指定字体的大小是倍数，1.2em倍数，也同样根据body的14px乘以1.2倍来计算的字体大小。实际大小是16.8但浏览器会四舍五入调整到17.

body{
	font-size：14px;
}
h1{
	font-size:150%；
}
h2{
	font-size:1.2em；
}

关键字

关键字是另外一种字体调整大小的办法。

她是通过固定规律的代码来决定字体的大小。

分别是

  1. xx-small
  2. x-small
  3. small
  4. medium
  5. large
  6. x-large
  7. xx-large

这样做的好处是他们会把关键字通过浏览器显示转换成像素值，这样浏览器就可以通过这些关键字的大小来调整字体的大小。

每个大小的都要比前一个大20%

small通常定义大约为12px

不过不同浏览器显示的可能不是相同。

body{
	font-size：small；
}

网页的字体大小选择

  • 关键字

可以把body设置成small，其他内容根据small在来调整字体大小。

用其他倍数

  • 百分比

设置完关键字后可以用百分比来控制其他字体的大小。

  • em

同理，可以把body设置成一个关键字，接下来其他的字体内容通过em倍数来调整。

测试一下如何使用

body{
	font-size:small;
}
h1{
	font-size:150%；
}
h2{
	font-size:120%；
}

h1的字体大小是body字体大小的150倍

h2的字体大小是body字体大小的120%

如果页面里面有p，则p没有动继承body的small字体大小。

如果在现在的基础上在让字体都变大一些就可以通过更改body的关键字来调整字体的大小。

body{
	font-size：large；
}
h1{
    font-size:150%;
}
h2{
    font-size:120%;
}

这样调整body的字体大小就能把下面的h1和h2都继承了body的large的属性。

在body的基础上在放大150%和120%

通过网页测试字体大小调整

@font-face{
	font-family: "微软雅黑",SimSun,SimHei,Georgia,"Palatino Linotype";
}
/*通过font-face来规定页面都有什么字体
 * SimSun宋体、SimHei黑体*/

body{
	font-family: SimSun;
	font-size: small;
}
h1{
	font-family: "微软雅黑";
	font-size: 150%;
}
h2{
	font-family: simhei;
	font-size:130%;
}
#ziti1{
	font-family: Georgia;
}
#ziti2{
	font-family: "palatino";
}

HTML页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体大小的测试</title>
		<link type="text/css" rel="stylesheet"href="字体大小.css"/>
	</head>
	<body>
		<h1>2021年3月11日</h1>
		<p>今天学习的是字体大小的设定，通过关键字和倍数还有em来调整这个页面的大小</p>
		<h2>调整字体的集中方式</h2>
		<p><img src="images/segway2.jpg"alt="这是一个图片"></p>
		<p>方法有很多种下面我用有序列表的方式来输入</p>
		<ol>
			<li>关键字</li>
			<li>倍数</li>
			<li>百分比</li>
		</ol>
		<h2>除了学习了这些意外，还学习了字体的样式</h2>
		<p>下面我通过无序列表来标识字体的样式</p>
		<ul>
			<li id="ziti1">one</li>
			<li id="ziti2">two</li>
			<li id="ziti3">three</li>
		</ul>
	</body>
</html>