您的位置:首页资讯编程开发 → Web标准设计中常用字体介绍及选用原则

Web标准设计中常用字体介绍及选用原则

时间:2010/8/6 23:25:30来源:本站整理作者:学臣我要评论(0)

浏览器中展示网页文字内容时,文字字体都会按照设计师在css中定义的字体族的顺序来进行显示。

什么是字体族?字体族就是你在css代码中看到“font-family”的代码内的一类字体名称,例如下面这行代码:

font-family:"Comic Sans MS","幼圆","黑体",sans-serif;

 按照W3C标准,浏览器在解析一行代码时首先会在系统中查找Comic Sans MS字体,如果系统内存在这个字体那么浏览器就会使用Comic Sans MS字体,如果没有的话就接着查找幼圆字体,以此类推直到浏览器可以表达系统存在的字体为止。

注意了,“sans-serif”不是某个字体的名称,而是一种在前面叙述的字体都无效时而最终选用的字体,称为浏览器通用字体,它取决于你所用的浏览器默认的通用字体是什么,可能是“Arial”,也有可能是“Helvetica”。(sans-是法语前缀“没有”的意思,意思是“无衬线字体”,无衬线字体我们接下来会有介绍)。这种情况是设计师应当尽量避免的,设计者应该尽可能给出齐全的字体设定(font set),以最大限度覆盖所有系统是为上策。

那么,你可能会问了,万一系统中都没有浏览器想要表达的字体时,怎么办?

那么浏览器会显示该字体的缺字符,缺字符是字体中的特殊字符,通常显示为一个方块,所以有时候小编看到网页上都是方块时感到很囧。请注意,还有一种情况浏览器也会显示方块,那就是有某种字体A系统中存在,而恰好也被浏览器采纳了,但是字体A中有个字符B是该字体中不存在的,那么浏览器也会以缺字符取代字符B的位置,表示空缺(浏览器表示压力很大)。

字体的css命名规则叫做“font-family”,但不等同于印刷意义上的font-family,实质上应该称作font set,印刷上的font-family是指一系列相同字样的不同强度组合,例如Lucida Family、Arial Family等。

My Glory

For King

汉字

Georgia字体 Times New Roman字体 宋体

字母“M”中上下方突出的短横线就是所谓的衬线,同理,“y、F、K”的上下方都用短横线进行了突出显示,为了弥补短横线的僵硬感又对曲折部分进行了园角加强处理,所有这类末端进行了加强的字体均称为衬线字体。我们经常在印刷出版物中看到这种字体,因为它们显示得很小,但可读性依然非常好,所以在印刷行业中被普遍使用,以降低成本。

在这里总结了几套实用、简单的字体族以供大家参考:

Tahoma系的中性字体,推荐在13px以上的环境中实用,Tahoma字体是小编最常用的字体,它的清爽在Windows系统中的默认字体里无可替代。

font-family:"Tahoma","Helvetica","Arial","Sans-serif;

Verdana系的款扁字体,推荐在11px以下的环境中实用,也只有老外的网站会使用,中文字体都不适合在11px下使用。

font-family:"Trebuchet MS","Verdana","Helvetica","Arial",sans-serif;

衬线字体的不二之选。

font-family:"Geogia","Times New Roman","Times",Serif;

等宽字体系列,适合写代码时使用。

font-family:"Lucida Console","Monaco","Courier","mono","monospace";

这里的字体都加上了引号,实际情况下不加引号浏览器也可以解析,但不排除个别浏览器不支持识别字体中的空格而导致错误发生的可能性。

我们可以用“黑体”来表达使用黑体的含义,这是因为浏览器支持GB2312编码,但有的系统不支持,所以尽量还是写成“Simhei”,同时也可以避免相同字体,但不同版本之间浏览器渲染效果的区别。

相关阅读 明日之后怎么打出彩色字体 彩色字体设置方法介绍神都夜行录彩色字体怎么发 彩色字体发送方法如何在CorelDRAW中安装字体我叫MT4彩色字体怎么使用 彩色字体代码汇总qq字体大小怎么设置 手机qq字体大小设置方法qq字体怎么改 手机qq字体怎么设置方法怎么让小程序返回两层 微信小程序点击返回两层实现方法努比亚手机怎么换字体 nubia手机换字体教程

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 编程语言排行榜2020年android studio怎么删 eclipse怎么设置编码格式 eclipse设置编码格andriod studio如何使用真机测试 andriod sandroid studio怎么生成apk android studioandroid studio如何导入jar包 android stud

人气排行 安卓模拟器BlueStacks安装使用教程编程语言排行榜2020年9月 TIOBE编程语言排行eclipse字体大小怎么设置 eclipse字体大小plsql developer怎么连接数据库 plsql deveTomcat9.0安装教程 Tomcat9.0环境变量配置方plsql developer怎么使用 plsql developerVisual Studio 2015环境搭建教程Eclipse优化设置教程 Eclipse优化设置技巧