天缘博客目前已支持雅黑字体显示,这样在Vista/Windows 7上会看起来更舒服点,问题虽小不过在测试时还是有些小的细节问题,这里总结一下,网页字体显示要求浏览者必须具有相应的本地字库,才会正常显示,否则将会按照系统默认的字体显示,所以设计网页就不得不考虑用户体验问题,虽然Vista/Windows 7已经发布并流行很久了,而Windows XP依然“东方不败”,占据过半市场,宋体依然是各大中文门户不二选择的主要原因。

一、网页中文字体

主流中文字体包括:微软雅黑、宋体、黑体。相对其它那些琥珀、隶书等,前面提到的中文字体相对较为安全,对中文网站而言,宋体的适应性最强,黑体老二,微软雅黑次之。

其它的新宋体、仿宋和楷体尽量不要用,对很多英文操作系统用户,即时是加装了中文语言包,也至多只有上面提到的六种中文字体(不算Adobe装入字体)。

宋体在VISTA和Windows 7下显示效果的却不太好看,难怪很多VISTA老用户对宋体如此反感,天缘自己用了一段时间Windows 7也比较认可雅黑似乎更好一点(虽然心底更倾向于传统的宋体),感觉主要原因还是跟Windows 7的Clear Type有关(跟分辨率应该没有关系,因为同样分辨率换成XP系统一样会显示很好),对小字号的宋体处理并不好,实际上把字号调上去之后,宋体效果在Vista/Windows 7上一样很好,可惜系统字体又是雅黑,这样一搭配就变成不伦不类的“丑感”了。

天缘博客是个偏向技术类博客,文章本来就长,字体又不能改的太大,再大页面就会更长,所以还是换成微软雅黑了。

二、网页英文字体

主流的英文字体包括:Verdana,Georgia,Courier New,sans-serif,Arial,Times New Roman,Impact

上面六种字体在英文站中算是用的最多的(天缘简单调查了五六个英文站),也是比较安全的字体,在各浏览器上显示统一性也比较好,此外,还可以使用Lucida Console,Lucida Sans Unicode,Tahoma,Impact,Lucida Grande,Helvetica等安全字体。

下图是Dreamweaver CS5上推荐的英文字体,仅供参考:

三、中文字体拼音及Unicode对照表

在CSS中使用中文或拼音均可以,如果发现CSS精神错乱,可以使用Unicode编码代替(延伸阅读:Unicode百科)。下表左侧列字体是按照对应的字体名称设置风格的,部分效果可能看不到应该是因为您的机子上缺少该字体或操作系统不支持。

中文名 英文名 Unicode
Mac OS
华文细黑 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 LiSong Pro Light \4E3D\5B8B Pro
苹果丽中黑 Apple LiGothic Medium \82F9\679C\4E3D\4E2D\9ED1
苹果丽细宋 Apple LiSung Light \82F9\679C\4E3D\7EC6\5B8B
Windows
黑体 SimHei \9ED1\4F53
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
仿宋 FangSong \4EFF\5B8B
楷体 KaiTi \6977\4F53
仿宋_GB2312 FangSong_GB2312 \4EFF\5B8B_GB2312
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1

本表格来源(节选):PRCSS

四、网站字体设置方法

这个比较简单,字体可以通过元素的style特性,还可以直接写到CSS文件里,在JS里动态设置也可以(效果相同一般只做特殊用途),例如:

写在元素的style特性里(示例):

<div style="font-family:Verdana, sans-serif">http://www.metsky.com</div>

写在CSS风格文件里(示例):

来源:(http://blog.sina.com.cn/s/blog_58f71ef00100j3j4.html) - 网页中、英文安全字体选择及设置_流云_新浪博客

body { margin:0; padding:0; font-family:Arial,"Microsoft YaHei",Simsun; }

注意:上述字体在使用时,如果是中文字体(或英文字体名超过一个单词的字体)时,需使用双引号扩起来,比如:font- family:Arial,"Microsoft YaHei","宋体";

五、字体使用参考建议

1、使用黑体字体的字号建议不要小于18px,否则在1024×768分辨率下,黑体显示会有些“变形”,不太美观,再加粗的情况下会很丑(字号像素知识:知识百科:中文字号、磅和像素对照关系)。

2、在网页设置可以把雅黑和宋体两种字体全部写上,似乎如果不设置宋体字体,可能在1280×800等宽屏分辨率下,使用Windows XP的用户会对雅黑字体网站显示模糊,天缘实测过调整平滑也没效果,也可能测试的有问题(暂不确定)。

3、IE6及IE8的兼容模式似乎对类似Arial,"Microsoft YaHei","SimHei"这样的组合标识认识有问题,单独字体设置没有问题。

4、感觉IE这么好的浏览器,被微软越做越难用了,包括IE8,兼容性比起Firefox、Chrome、Opera等差远了。

5、安全是相对的,不安全是绝对的。

来源:(http://blog.sina.com.cn/s/blog_58f71ef00100j3j4.html) - 网页中、英文安全字体选择及设置_流云_新浪博客

来自: http://hi.baidu.com/76805302/blog/item/c3058902a1e2e0024afb5134.html

网页中、英文安全字体选择及设置相关推荐

  1. woff, 在网页中嵌入任意字体的解决方案

    woff, 在网页中嵌入任意字体的解决方案 http://topic.csdn.net/u/20110705/10/98e79aba-1ddf-42fa-84a9-b79ec494cb69.html ...

  2. 在网页中嵌入任意字体的解决方案 (insert any font)

    字体使用是网页设计中不可或缺的一部分.经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的 时候就有可能看不到真实的设计.美工设计师最常做的办法是把想要 ...

  3. html5 在线字体库,网络字体@font-face,如何处理网页中的特殊字体?

    网络字体@font-face 如何处理网页中的特殊字体 HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑.宋体.黑体已经越来越难以满足设计的需要,那么,如何在网站中使 ...

  4. python中matplotlib自定义设置图像标题使用的字体类型:获取默认的字体族及字体族中对应的字体、自定义设置图像标题使用的字体类型

    python中matplotlib自定义设置图像标题使用的字体类型:获取默认的字体族及字体族中对应的字体.自定义设置图像标题使用的字体类型 目录

  5. 网页中Flash播放器常用参数设置(转)

    网页中Flash播放器常用参数设置 2006-11-26 23:24 我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少 ...

  6. 网页中使用任意字体之实际操作

    之前对"在网页中嵌入非系统自带字体"做过一点研究,虽然技术上能实现,但是对国内来说,没有太大的实际意义,因为一个中文体文件起码20M+,而且各个浏览器支持的字体文件还都不一样,也就 ...

  7. 在网页中嵌入任意字体(特殊字体/自定义字体)的解决方案

    在网页中嵌入任意字体(特殊字体/自定义字体)的解决方案 参考文章: (1)在网页中嵌入任意字体(特殊字体/自定义字体)的解决方案 (2)https://www.cnblogs.com/yuwenson ...

  8. 在网页中嵌入任意字体的解决方案---google在线字体库应用

    在网页中嵌入任意字体的解决方案---google在线字体库应用 参考文章: (1)在网页中嵌入任意字体的解决方案---google在线字体库应用 (2)https://www.cnblogs.com/ ...

  9. html中怎么制作选择头像,网页中的个人头像选择框(转)

    网页中的个人头像选择框(转) 1.先看个效果 2.源文件 New Document body,td,div  {font:12px 宋体} label        {height:119px;pad ...

最新文章

  1. 判别式or生成式:哪一个才能代表视觉理解的未来?
  2. 基于linuxunix高性能web服务器架构思路分析
  3. 计算机组成原理 — 冯诺依曼体系结构
  4. 算法设计--查找无序数组中第K大的数字
  5. 你是PHP菜鸟,如果......
  6. Linux nohup和的功效
  7. python面向对象编程思想书籍_Python的面向对象编程思想
  8. java学习(43):值参数传递
  9. java的方法调用中分不清_java中不太清晰的知识点
  10. 超有意思的代码注释_程序员搞笑的代码注释:谁的代码注释我都不服,就服你的...
  11. java - 常见对象object
  12. 利用自定义注解,AOP + redis限制ip访问接口次数
  13. 计算机哪个是易失性存储器,易失性的存储器是什么?
  14. wechart image标签
  15. 无线传感网学习笔记(6)—— S-MAC协议 和 Z-MAC协议
  16. script标签中的 defer 和 async 属性
  17. c语言中排列组合函数,排列组合c怎么算公式是什么
  18. 质数的java代码_java 代码求质数
  19. 人体疲劳程度检测,生理信号处理
  20. Spark大数据技术与应用期末总结大题

热门文章

  1. 坯子库安装不上_kodi如何安装中文插件?kodi中文插件安装方法
  2. 狼道:强者的成人礼(第2版)
  3. ab plc软件_【原创】AB上位机FactoryTalk View的使用教程(上)
  4. 「雕爷学编程」Arduino动手做(21)——激光开关模块
  5. 软件测试第八次作业—— 缺陷管理(含缺陷管理工具的配置实验)
  6. java时间类Date、Calendar及用法
  7. PHP从千千静听服务器获取lrc歌词
  8. JQuery实现——黑客帝国代码雨效果
  9. LoadRunner error -27728
  10. 关于无法获取客户端IP地址