网页设计如何使用特殊字体

对於网页设计公司前端来说,为了确保显示效果,长期以来不得不一直使用“安全字体”,英文网站一律是 Verdana,中文网站一律是宋体——因为这是每台流览网页的电脑里肯定装有的字体。

网页设计如何使用特殊字体

这是设计理念不断进步的UI老师们所不能容忍的。字体可是页面效果的根本,好比T台模特的衣服换了千万种,但你只能用这一两个模特(对於中文用户那就几乎只有一个宋体)?如何才能在网页上应用丰富的字体效果?

特殊字体应用方案

目前方案无非三种

1. 客户打开网页的时候,提示客户安装该字体。

2. 制作图片嵌入网页。

3. 把字体嵌入到网页中(通过上传字体档到指定目录,让CSS引用显示)。

第一种方案明显存在弊端,用脚本程序去识别客户端是否含有该字体,加重程序的负载量。而且严重影响用户的体验。效果最次!
第二种方案生成图片,网页加载慢,不利於百度收录,效果差!
第三种方案流量小加载速度快,效果最好!
第三种方案就是指网路字体(web font,也被称为“网页内嵌字体”或“网页外调字体”),通过上传字体档到指定目录,然後在CSS中用规定格式进行引用就可以使字体效果跃上你的页面了,使网页用字不再受流览客户端的影响。

网路字体与流览器支持

网路字体是靠CSS中的@font-face语句来实现的,通常认为网路字体是CSS3中的一个模组,其实早在CSS2中就已经有了,连老古董IE6甚至IE4都支持。其他和种流览器包括手机流览器也都完美支持(如IE、360、搜狗、火狐、chrome、safari、Opera等)。

网路字体使用方法

各种流览器都支持@font-face语句,但嵌入的字体档却是各自为政。要想使所有流览器都能正常显示,那你就得准备各种格式的字体档进入嵌入(.eot、.woff、.svg、.ttf)。

可以将字体上传到FontSquirrel上,自动生成所需要的所有格式。然後将档上传到空间,然後根据@font-face语句规范进行引用。
中文网路字体使用方法

中文字体要注意一下,因为中文字体不同於英文,一套中文字体一般4-6M如果整套嵌入的话,没有多少流览者会有耐心等到字体加载完,在加载完之前已经关闭页面了。

所以中文字体需要事先进行截取,根据文章内容涉及到的字进行截取,截取後的小字体方可嵌入使用。

没错中文确实太麻烦了,这也是为什麽英文网页使用网路字体那麽多,中文却很少遇到。

第三方平台简易操作

要准备各种格式的档操作起来太麻烦了,尤其中文还要截取小字库。
没有专业的工具就很难实现了,不过不用担心,如果借助於第三方平台,这一切就易如反掌。
现在网上已经出现一些很好的平台。如英文的typekit、fontdeck、google font等,中文的“有字形档”youziku.com等,都可以大大方便网路字体的使用。

有字形档主要针对中文网路字体引用,使用方法主要有两种:

1. javascript方式

选定字体後,网站会提供给你一段javascript脚本,不需要提交文章,直接将脚本引入</body>之後</html>之前,就可以了,脚本会自动根据当前文章内容生成各种格式的字体档,并嵌入到当前页面。

2. CSS方式

选定字体後,需要提交文章内容,网站会根据文章内容截取成小字库,自动生成各种格式的字体档(.eot、.woff、.svg、.ttf),并返回一个css档引用的Link标签,只需要将此Link标签引入页面的head标签中即可,最後别忘了在引用网路字体的标签上设置class。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/40167.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
上一篇 2022年6月8日 21:54
下一篇 2022年6月8日 22:36

相关推荐

  • 电商网站设计如何进行视觉推导?

      为了避免电商网站设计项目因为风格方向的错误,而造成的反复修改,建议不妨先进行视觉推导。 一般来说,视觉推导需要从形式、排版、配色、布局这四个方面组成: 形式 一般建议像常规卖货的专题页设计那样...

    2022年6月25日
    0123
  • 如何利用404页面优化增加网站seo权重?

    如何利用404页面优化增加网站seo权重?绝大多数用户看到404页面的时候都会感到无奈,因为这意味着这个链接所对应得页面已经不存在,或者是搜索结果出错了。但是,如果你能够正确设计404页面,并且充分利用它解决用...

    2022年6月25日 建站资讯
    0124
  • 搭建网站前,你是否忽略了这15个问题。

    搭建一个新的网站,从前期的设计构思到最终上线,通常是一个比较考验耐心的过程。无论你是自助建站,还是帮客户定制网站的第三方,在建站前,了解网站需求,并在设计阶段进行全方位匹配,就是一个不小的挑战。 如...

    2022年7月3日 建站资讯
    0102
  • 网站建设中交互如何应对需求和目标

    当网站建设的项目在立项的时候,都会需求建立一个明确的设计目标。而网站建设会有迭代的过程,也就意味着会有多个需求出现,也就会有多个目标需要完成。 简单来说不如举个“注册”的例子:“注册”就是属￿网站建设自...

    2022年6月25日
    0119
  • 如何在UI设计中,有效地提高文本可读性。

    我们每天的工作都离不开大量的信息流。新技术和快速的互联网让资讯井喷,人们可收集到比纸质媒体更多的内容。处理众多网站和应用程序时,用户不会一目了然地阅读他们看到的所有内容 - 他们首先扫描页面以找出原因...

    2022年7月3日 建站资讯
    0204
  • 外国品牌如何打造时尚类网站设计。

    时尚界讲究个性、前卫、潮流……你需要有自己的定位,既可以风格独特,也可追求高端质感,而平庸者,只会在行业中被淹没。同理,时尚类网站设计,无论从体验及网页设计上,都会更多地追求简约、创意、新潮理念。今...

    2022年7月4日 建站资讯
    0102
  • 专业网站建设拥有的9种特征。

    1、明确和突出的品牌设计 这是显而易见的事情。印刷出版的杂志通常会有明显而突出的品牌设计,通过品牌化的设计,有的会强调其权威性,有的会强调其个性。很大程度上,品牌化的设计是为了从激烈的竞争者脱颖而出...

    2022年7月4日
    0133
  • 留白引导用户的视线轨迹

    留白不仅仅是网页设计的手段,更是必不可少的元素。无论是非常明显的留白还是自然得毫无痕迹的留白,留白是每个网页必不可少的元素之一!留白最突出的作用就是能够将元素、内容、数据等之间的有效的分割出来, 当...

    2022年6月10日
    0126

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息