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%就能正常显示了。
更多推荐
关于字体大小和字体的设置
发布评论