网站建设中网页内容的字体设计选择与设置!提高内容可阅读性

在追求极致用户体验的今天,不光是网页上内容色彩的设计对于用户体验非常重要,常常被忽略的网页字体同样重要,熟不知当用户流量网页时,第一眼看到的当然是设计效果精良的图片展示,那么接下来想要了解具体详情的话还得依靠文字内容的说明,这个时候,文字的可阅读性就起到非常重要的作用,字体看上去很不舒服,排版杂乱无章是非常影响阅读体验而造成用户不必要的流量,网页字体设置不同于平面设计等其他媒体设计有更多的艺术字体可供选择。


因为网页设计中永远不要假设客户的电脑上有你使用的字体。为了让我们的网页在绝大多数访客的电脑上看起来一致。就必须使用绝大多数访客电脑上都有的字体。正常设置常用字体时通过css设定,如:font-family:'Microsoft Yahei',"simsun"; 意思是先找微软雅黑,如果没有就使用宋体字,当然,如果你的客户是windows中国用户宋体是默认字体,此时font- family:'Microsoft Yahei',"simsun";和font-family:'Microsoft Yahei';等价的。找不到微软雅黑字体就会使用默认的宋体。

网页字体参考

    font-family:"simsun";

    font-family:Tahoma,Arial,Helvetica,STHeiti;

    font-family:Georgia, "Times New Roman","simsun";

    font-family:'Microsoft YaHei UI','Microsoft YaHei',DengXian,SimSun,'Segoe UI',Tahoma,Helvetica,sans-serif;

    font-family:'Hiragino Sans GB','Microsoft Yahei',SimSun,Tahoma,Arial,Helvetica,STHeiti;

    font-family:"ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif


font-family:'Hiragino Sans GB','Microsoft Yahei',"WenQuanYi Micro Hei",SimSun,Tahoma,Arial,Helvetica,STHeiti;

这些网页字体依次是 “苹果丽黑字体”(这个是苹果系列设备上用),微软雅黑、文泉驿(细)微米黑字体,宋体,Tahoma,Arial,Helvetica,苹果黑体字体(这个是苹果系列设备上用)

很多时候有人习惯用宋体、arail或者tahoma作为第一字体。但是,这里面有个很大的问题,对于字号大一点的字体(16px以上的),渲染出来是相当的难看。不过我电脑上使用了windows下优化字体的东西,就无法给大家展示了。总之,对于大号字体,用这种的设置挺难看的。


如果一定要使用自己的字体的话,那么这里就要将字体上传到服务器然后在网页CSS文件中引用了,例如:

1、首先需要下载你需要的字体,此项目中用到的字体是思源黑体(light),需要字体文件的格式是.ttf,思源的ttf版字体不好找,我是下载的otf版,又用fontCreate 软件转换了一下,算是得到了ttf字体(废了老大劲,才转换成,网上贴出来的在线转换文字格式的网站试了,不太靠谱)。

2、需要把字体文件放到你的项目文件font中。

3、css中引入字体文件

@font-face {

    font-family: font_light;

    src: url('../lib/font/font-light/SourceHanSansCN-Light.eot');

    src: url('../lib/font/font-light/SourceHanSansCN-Light.eot?#iefix') format('embedded-opentype'),

    url("../lib/font/font-light/SourceHanSansCN-Light.ttf") format("truetype"),

    url("../lib/font/font-light/SourceHanSansCN-Light.woff") format("woff"),

    url("../lib/font/font-light/SourceHanSansCN-Light.svg") format("svg");

    font-weight: normal;

}


那么有人说微软雅黑在字体大的时候挺好看的。全部设置微软雅黑怎么样?

这里有个很大的问题,雅黑是windows vista才有的,对于占有率为65%+的xp用户来说,你设置了雅黑等于没写。他们还是用宋体啊什么的渲染的。除了你自我安慰或者应付BOSS(BOSS一般都会赶潮流用windows 7以上)。对大部分用户来说真的没用。而且微软雅黑在渲染12px字体时并没有宋体它们来得好。

所以在此无双科技建议使用微软雅黑,如果是数字或者字母的话可以尝试使用英文字体Tahoma,Arial,Helvetica,兼顾一下苹果系列设备,附加一个'Hiragino Sans GB',STHeiti

微软雅黑如果是小字号会不好看,大字号会比较好看,雅黑字体加粗不好看,大字号不加粗比较美观。

黑体字也是中国的windows电脑上都有的但是尽量不用黑体字,黑体字少量标题加粗的地方可以用。


经过多年的网站建设经验的积累,这里总结分享一些字体设置的技巧经验:

1: 综合最优

全站字体设置如下

font-family:Helvetica,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;

然后对于大的重要的字体(例如导航)使用图片来处理。因为用图片后,你就不用纠结用户是否装了这个字体的问题了,而且可以做的更漂亮,更多的扩展性与可能性。

 

2: 性能最好

全站字体还是

font-family:Helvetica,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;

然后对于大的字体(这里就不管重不重要了)。单独来设置

font-family:Microsoft YaHei;

这种设置可以让前端省挺多事,不过会有很多xp的用户会被大号字体给丑到。

 

3: 最省事方案

直接

font-family:Helvetica,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;

或者

font-family:Microsoft YaHei,Helvetica,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;

虽然有可能渲染大字体不漂亮,虽然雅黑渲染小字体不清晰。but,有什么关系呢。

在上的的分享中

sans-serif是无衬线字体的意思,并不是一种字体,而是一类字体的统称。

相应的,serif就是用衬线字体的意思。

常见字体族有:

  • serif:带衬线字体。Times New Roman 是默认的 serif 字体,中文字体的话,是宋体、仿宋之类的字体。
  • sans serif:无衬线字体。Arial 是默认的 sans-serif 字体,中文字体中,微软雅黑、黑体等都是这类字体,英文字体包括Helvetica、Geneva或Verdana等。
  • monospace:等宽字体。这个字体里面的每个字母都有相同的宽度。通常用于显示程序代码等,Courier 是默认的 monospace 字体。而对于中文,每个汉字都是等宽的。

猜你喜欢