网页字体相关问题汇集

网页的视觉效果无非取决于文字和图像,而文字又占据着举足轻重的主导地位。所以UI设计师在设计效果图时都要花不少心思在字体运用上,首先是根据网站风格和面向对象来选择合适的字体,其次要根据内容重要性、板块主次性来运用粗、斜体、大小字号来表达视觉层次感。
显然,UI设计注重于美观效果,这是无可厚非的;但是到了网页美工切图时,问题就不这么单一了,比如说效果图中的字体是不是大众电脑系统的通用字体等,是需要考虑些实用性的。下面就说说我所遇到的两个问题及其解决方案和可选性:
一、              当网页运用字号小于12px的字体时,部分浏览器表现固执,默认都只显示为12px的字号,譬如谷歌浏览器。
通常情况,尤其是中文网站,我们最小都是用的12px的字号,但是一些英文网站为了达到一定效果,一般都会需要些小字号字体来映衬,不知道大家遇到过没有,反正我是遇到过,也曾特别不理解,因为在谷歌浏览器测试时发现,我设为8px字号的字体俨然就是12px的大小,很不服气地又试了试,终于发现,凡是低于12px的字号,谷歌浏览器统统默认显示为12px大小,唉,感叹谷歌浏览器的开发者在用户体验上做的如此细微。可是个别情况还是得定当别论,请教了高手,问题解决,只需在样式里添加这样一个针对谷歌浏览器的专有属性设置:-webkit-text-size-adjust:none;真的是解铃还须系铃人啊,既然你谷歌做了默认设置,那咱就想法改变这个设置啦。
二、          当网页运用字体不是大众电脑系统的通用字体时,咱改如何实现呢?
好在CSS确实够强大,咱可以尽情的调用你所拥有的任何字体文件,看具体方法:
@font-face { font-family : name(字体名称) ; src : url (绝对或相对 url 地址指定OpenType字体文件) ; sRulesZ(样式表定义) }
但是试了后发现,兼容方面还不合格,继续努力发现问题出在字体文件的格式上:
* .TTF或.OTF,适用于Firefox 3.5、Safari、Opera
* .EOT,适用于Internet Explorer 4.0+
* .SVG,适用于Chrome、IPhone
因此样式要这么来写:(以HeiTi TC字体为例)
@font-face {
font-family:”HeiTi TC”;
src: url('HeiTi TC.eot');
src: url(' HeiTi TC.eot?#iefix') format('embedded-opentype'),
url(' HeiTi TC ') format('woff'),
url(' HeiTi TC.ttf') format('truetype'),
url(' HeiTi TC.svg#webfont34M5alKg') format('svg');
}
自己提供字体的各种版本放在css样式表所在文件夹中,浏览器在加载网页时会自动下载相应字体文件。
在这同时我还发现了一个很好的网站,谷歌的webfonts(搜索下就出来了),这是谷歌开发的一个在线字体运用网站,里面收纳了不少英文字体,所以如果是需要英文字体,可以先在这上面搜搜看,如果有就直接由google生成相应code,这样网站在加载时会直接调用这个在线字体,很方便。
问题如是解决,但还是不得不说明一下,这样加载外部字体,会比较影响页面的加载速度,直说就是在美观上加分了,但在用户体验上大大折扣了,所以还是建议选用通用字体来替代。

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP