`
piperzero
  • 浏览: 3594225 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

网页中、英文安全字体选择及设置

 
阅读更多

天缘博客目前已支持雅黑字体显示,这样在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百科)。下表左侧列字体是按照对应的字体名称设置风格的,部分效果可能看不到应该是因为您的机子上缺少该字体或操作系统不支持。

<wbr></wbr>

中文名 英文名 Unicode Mac OS Windows
华文细黑 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
黑体 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

<wbr></wbr>

本表格来源(节选):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) - 网页中、英文安全字体选择及设置_流云_新浪博客

分享到:
评论

相关推荐

    站长编辑PS必备之8大英文艺术字体

    此外,不同的浏览器和设备可能对某些字体支持度不同,因此在网站设计中,推荐使用网络安全字体或通过Web Font服务来保证跨平台的兼容性。 总结来说,这些英文艺术字体是站长和Photoshop用户的宝贵资源,它们丰富了...

    网页制作 默认Web字体样式

    一般而言,网页中最常用的中文显示字体是宋体,但是由于宋体在显示英文、数字和英文符号时表现不佳,所以通常会使用其他英文字体作为默认字体。例如Arial字体,它的优势在于Windows和Mac系统中都预装了Arial字体,使...

    跨平台字体效果浅析1

    设计师应当选择广泛支持的中英文字体,考虑到不同操作系统间的字体差异,并通过适当的技术手段(如设置备选字体和Web安全字体)来优化跨平台的视觉一致性。这样,无论用户使用何种操作系统,都能获得良好的阅读体验...

    网页常用英语命令说明

    通过选择器如`.class`或`#id`,可以设置元素的颜色、字体、位置等属性。例如:`.myClass {color: blue;}`。 3. JavaScript:这是一种客户端脚本语言,用于增加网页的交互性。常见的JavaScript命令有`document....

    网页设计基础-11CSS的应用2.pdf

    7. 设置字体样式:字体font-family,可以添加字体及字体组合,原则和技巧是尽量不要添加字体,因为一旦添加了一些独特的字体,应用到网页上,而别人的电脑里没有这种字体,浏览网页的时候,这些字体就会显示不正确。...

    网页设计需要注意的一些基本问题 pdf

    综上所述,《网页设计需要注意的一些基本问题》这份资料全面涵盖了网页设计中的关键要点,从页面设置到字体选择,再到优化网页加载速度,为网页设计师提供了一套系统性的指导方案。遵循这些建议,可以帮助创建既美观...

    网页设计试题及html代码.doc

    网页设计基本格式包括字体设置、段落设置、强制换行设置、插入水平线设置、无序列表设置和有序列表设置等。这些基本格式都是网页设计的基础知识,掌握这些知识是设计一个美观和实用的网页的前提。

    VirtualKeyBoard,js虚拟键盘,中英文切换,数字输入

    VirtualKeyBoard.js虚拟键盘是一种基于JavaScript技术实现的轻量级组件,主要应用于网页或Web应用程序中,为用户提供在浏览器环境中输入文本的交互方式。它特别适用于那些需要在移动设备上或者安全环境中输入敏感...

    网页设计及制作期末考试题及答案.doc

    8. 在HTML中,`&lt;font&gt;`标记的Size属性最大可以设置为7,但现代网页设计更倾向于使用CSS来控制字体大小。 9. `&lt;td&gt;`是HTML中用于定义表格单元格的标记。 10. DOM(文档对象模型)是HTML和XML文档的结构化表示,允许...

    网页窜改软件,可以把网页随意改

    在描述中,提到了一个潜在的应用场景——应对大学英语的网络测试。这里可能是指某些在线学习平台或测试系统,它们基于网页技术构建。一些学生可能会使用这种工具来篡改网页内容,例如更改测试题目或答案,但这是一种...

    网页设计面试题

    - **解析**:在FrontPage中,可以通过报表视图来检查网页的超链接状态,报表视图提供了多种报表类型,如超链接验证报表,帮助开发者快速发现无效链接。 13. **如果站点服务器支持安全套接层(SSL),那么连接到安全...

    2022年《电子商务网页设计与制作》综合测试卷及答案.docx

    14. 文本基本样式:文本样式设置包括字体、大小、颜色,不包括“中英文”作为样式设置。 15. 其余未列出的题目,同样涉及到HTML元素属性、网页交互行为、网页布局技巧等方面的知识。 以上是《电子商务网页设计与...

    最精简的网页编辑器ckeditor4.0(英文基础版)

    9. **安全性**:CKEditor 4.0 有内置的安全机制,如防止XSS攻击,确保在编辑过程中内容的安全。 10. **易用性**:简洁的界面和直观的操作使得 CKEditor 对新手友好,同时也满足专业开发者的高级需求。 在实际使用...

    Chromium

    这些字体格式使得开发者能够灵活地选择和使用各种字体,为用户提供个性化的网页设计。 Chromium 内置了字体渲染引擎,负责将文本转化为屏幕上清晰、美观的图像。这个引擎支持字体抗锯齿技术,使得文本边缘更加平滑...

    html+css蓝色渐变大气的网页模板

    模板可能会使用Web安全字体或通过@font-face导入自定义字体。 5. 响应式设计:考虑到不同屏幕尺寸的设备,模板可能采用了媒体查询(`@media`)来定义不同分辨率下的样式规则,确保在手机、平板和桌面电脑上的良好...

    2022年《电子商务网页设计与制作》模拟试题及答案.docx

    23. 文本的基本样式设置包括大小、颜色、中英文和字体等。 24. 设置字体大小时,“中”介于 12~14 之间。 25. 页面设置即页面属性设置,包括外观、文字、链接和标题等。 26. 使用“改变属性”行为可更改对象的...

    网页设计的考试答案.docx

    - `&lt;size&gt;`属性在HTML中用于调整字体大小,最大可设置为7。 - `&lt;td&gt;`标记用于定义HTML表格中的单元格。 - CSS(Cascading Style Sheets)有四种插入方式:内联、内部、嵌入和外部。 - 图像格式JPEG和GIF在网页中...

    《网页设计与制作》期末考试试题及答案1借鉴.pdf

    《网页设计与制作》期末考试试题及答案主要涵盖了网页设计与制作的基础知识,包括了多项选择题和单选题,涉及了互联网服务、域名系统、HTML标签、客户端脚本语言、图像格式、网络安全等多个方面。以下是这些知识点的...

    FCKeditor具体设置及使用

    FCKeditor具体设置及使用 FCKeditor是一款功能强大且灵活的在线编辑器,可以帮助开发者轻松实现网页上的富文本编辑功能。下面将详细介绍FCKeditor的配置和使用方法。 配置FCKeditor 首先,需要下载FCKeditor_...

Global site tag (gtag.js) - Google Analytics