关于字体大小和字体的设置

1.问题：

CSS文件中已设置了标签的属性font-family:"微软雅黑"，但是字体的显示的效果却是宋体，查看一下网页源代码，发现设置的字体为乱码。

乱码显示如font-family:"΢���ź�" ;

2.解决方法：

字体设置不要用中文：如font-family:"微软雅黑"；而使用字体的Unicode编码：如font-family:\5FAE\8F6F\96C5\9ED1;

3.总结：

常见字体Unicode编码如下：

中文名	英文名	Unicode	Unicode2
Windows
新细明体	PMingLiU	\65B0\7EC6\660E\4F53	新细明体
细明体	MingLiU	\7EC6\660E\4F53	细明体
标楷体	DFKai-SB	\6807\6977\4F53	标楷体
黑体	SimHei	\9ED1\4F53	黑体
宋体	SimSun	\5B8B\4F53	宋体
新宋体	NSimSun	\65B0\5B8B\4F53	新宋体
仿宋	FangSong	\4EFF\5B8B	仿宋
楷体	KaiTi	\6977\4F53	楷体
仿宋_GB2312	FangSong_GB2312	\4EFF\5B8B_GB2312	仿宋_GB2312
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312	楷体_GB2312
微软正黑体	Microsoft JhengHei	\5FAE\x8F6F\6B63\9ED1\4F53	微软正黑体
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1	微软雅黑
Office
隶书	LiSu	\96B6\4E66	隶书
幼圆	YouYuan	\5E7C\5706	幼圆
华文细黑	STXihei	\534E\6587\7EC6\9ED1	华文细黑
华文楷体	STKaiti	\534E\6587\6977\4F53	华文楷体
华文宋体	STSong	\534E\6587\5B8B\4F53	华文宋体
华文中宋	STZhongsong	\534E\6587\4E2D\5B8B	华文中宋
Mac OS
华文仿宋	STFangsong	\534E\6587\4EFF\5B8B	华文仿宋
方正舒体	FZShuTi	\65B9\6B63\8212\4F53	方正舒体
方正姚体	FZYaoti	\65B9\6B63\59DA\4F53	方正姚体
华文彩云	STCaiyun	\534E\6587\5F69\4E91	华文彩云
华文琥珀	STHupo	\534E\6587\7425\73C0	华文琥珀
华文隶书	STLiti	\534E\6587\96B6\4E66	华文隶书
华文行楷	STXingkai	\534E\6587\884C\6977	华文行楷
华文新魏	STXinwei	\534E\6587\65B0\9B4F	华文新魏
华文细黑	STHeiti Light [STXihei]	\534E\6587\7EC6\9ED1	华文细黑
华文黑体	STHeiti	\534E\6587\9ED1\4F53	华文黑体
华文楷体	STKaiti	\534E\6587\6977\4F53	华文楷体
华文宋体	STSong	\534E\6587\5B8B\4F53	华文宋体
华文仿宋	STFangsong	\534E\6587\4EFF\5B8B	华文仿宋
丽黑	Pro LiHei Pro Medium	\4E3D\9ED1 Pro	丽黑 Pro
丽宋	Pro LiSong Pro Light	\4E3D\5B8B Pro	丽宋 Pro
标楷体	BiauKai	\6807\6977\4F53	标楷体
苹果丽中黑	Apple LiGothic Medium	\82F9\679C\4E3D\4E2D\9ED1	苹果丽中黑
苹果丽细宋	Apple LiSung Light	\82F9\679C\4E3D\7EC6\5B8B	苹果丽细宋

3.word中字体大小（pt）和网页中css设置font-size时用的px大小对应关系

a、“Ems”: em，大小不固定 ,成为相对单位（body则相对浏览器的默认字体设置，子集相对父级）， 浏览器默认 设置字体大小为16px , 则1em = 16px , 且其可扩展，2em = 32px , 目前常用的字体大小px换算成em ,

b、“Pixels”: px,大小是固定的，称为绝对单位，在移动端的可访问性差

c、“Points”:pt，大小固定，属于绝对单位，适用于印刷、打印媒体。

d、“Percent”: %，跟em相似，以percent来表示，则当前字体的大小为100% ，使用% 设置字体，你的页面字体 在移动设备端的可访问性也很好。 

初号44pt 小初36pt 一号26pt 小一24pt 二号22pt 小二18pt 三号16pt 小三15pt 四号14pt 小四12pt 五号10.5pt 小五9pt 六号7.5pt 小六6.5pt 七号5.5pt 八号5pt

二、关系

一般情况下，1em=12pt=16px=100% . 下面例子前提在body中设置基础字体大小。

由上图可看出，相对单位em 和 % 会随着基础字体大小的变化而变化，而pt 和 px 不会变化，这就是为什么选择em 和 % 设置web文档文本的字体（其在移动端的访问性也很好）。

三、em 与 % ，em与px 的换算

em的特点：

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

重写步骤：

1. body选择器中声明Font-size:62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；

如果只需要以上两步就能解决问题的话，可能就没人用px了。经过以上两步，你会发现你的网站字体大得出乎想象。因为em的值不固定，又会继承父级 元素的大小，你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em，但如果p属于content的子级的话，p的字体大小就不是12px，而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em，这个em值继承其父级元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作为其子级，em则继承content的字体高，也就是12px。所以p的1.2em就不再是12px，而是14.4px。

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明，也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#main中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

诡异的12px汉字

在完成em转换时还会发现一个诡异的现象，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而 是稍大一点。这个问题我已经解决，你只需在body选择器中把62.5%换成63%就能正常显示了。