2021年3月11日font-face属性和字体大小

2021-03-11 23:02:06 阅读：168 来源： 互联网

标签：11 body 字体大小 face 字体 small font size

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；
}

关键字

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

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

分别是

xx-small
x-small
small
medium
large
x-large
xx-large

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

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

small通常定义大约为12px

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

body{
	font-size：small；
}

网页的字体大小选择

关键字

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

用其他倍数

百分比

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

同理，可以把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>

标签：11,body,字体大小,face,字体,small,font,size
来源： https://www.cnblogs.com/tallish/p/14521210.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9