美文网首页大闹前端Web前端之路程序员
web前端开发【连载5】-前端字体

web前端开发【连载5】-前端字体

作者: Iris_mao | 来源:发表于2017-04-10 16:19 被阅读153次

    最近江苏都是阴雨连绵,但是不管天气怎么不好,我们都要保持一个好心情哦O(∩_∩)O~


    粘人的傻球
    web前端字体

    在做页面的时候都会遇到各种字体,根据UI的设计,不同的模块可能会用到不同的字体,但是每次都是根据UI的设计稿来获取字体,但是作为前端开发,连最基本的字体种类都不知道,今天就来全面的整理一下,有时候各种不协调就败在字体上面:

    1. 在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体。
         浏览器中展示网页文字内容时,文字字体都会按照设计师在css中定义的字体族的顺序来进行显示。什么是字体族?字体族就是你在css代码中看到“font-family”的代码内的一类字体名称,例如下面这行代码:
      font-family:"Comic Sans MS","幼圆","黑体",sans-serif;
        按照W3C标准,浏览器在解析一行代码时首先会在系统中查找Comic Sans MS字体,如果系统内存在这个字体那么浏览器就会使用Comic Sans MS字体,如果没有的话就接着查找幼圆字体,以此类推直到浏览器可以表达系统存在的字体为止。
        注意了,“sans-serif”不是某个字体的名称,而是一种在前面叙述的字体都无效时而最终选用的字体,称为浏览器通用字体,它取决于你所用的浏览器默认的通用字体是什么,可能是“Arial”,也有可能是“Helvetica”。
    2. 网页常用字体通常分为5类:serif(衬线)、sans-serif(无衬线)、monospace(等宽)、fantasy(梦幻)、cuisive(草体),这些通用的名称允许用户代理从相应集合中选择一款字体。
          serif 字体在字符笔画末端有叫做衬线的小细节,这些细节在大写字母中特别明显。
          sans-serif 字体在字符笔画末端没有任何细节,与serif字体相比,他们的外形更简单。
          monospace 字体,每个字母的宽度相等,通常用于计算机相关书籍中排版代码块。
          fantasy 和 cuisive 字体在浏览器中不常用,在各个浏览器中有明显的差异。
    3. 网页常用字体
      Sans-serif:
      Helvetica: 被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。在Mac下面被认为是最佳的网页字体,在Windows下由于Hinting的原因显示很糟糕。
      Arial: Helvetica的「克隆」,和Helvetica非常像,细节上比如R和G有小小差别。如果字号太小,文字太多,看起来会有些累眼。Win和Mac显示都正常
      Lucida Family: Lucida Grande是Mac OS UI的标准字体,属于humanist风格,稍微活泼一点。Mac下的显示要比Win下好。
      Verdana: 专门为了屏显而设计的字体,humanist风格,在小字号下仍可以清楚显示,但是字体细节缺失严重,最好别做标题。
      Tahoma: 也是humanist风格,字体和Verdana有点像,但是略窄一些,counter略小,曾经是Windows的标准字体,Mac 10.5之后默认也有安装。
      Trebuchet MS: 为微软设计的一个humanist风格字体,个人觉得个性太过突出,用得不好会不搭。
      Serif:
      Georgia: 基本上适合正文屏显的衬线字体,非Georgia莫属了。笔画粗重,衬线明线,轮廓较大,小字体显示也很清晰,同时细节还算OK。
      Times: Times是为了报纸而设计的,特点是可以在有限的空间塞进去更多的文字,笔画较弱,小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文,被骂得很惨之后换成了Georgia。
      中文:
      宋体:Win最常见的字体,小字体点阵,大字体TrueType,但是大字体并不好看,所以最好别做标题。
      微软雅黑:Vista之后新引入的字体,打开Cleartype之后显示效果不错,不开Cleartype发虚。
      华文细黑:Mac下的默认中文。

    手机端字体思考可以参考:【原】移动web页面使用字体的思考

    相关文章

      网友评论

      • aaf0e819343f:看完只想说,放开那猫咪,冲我来!😀😀
        Iris_mao:@话说认真说 傻球会挠你的哦:smirk_cat::smirk_cat:

      本文标题:web前端开发【连载5】-前端字体

      本文链接:https://www.haomeiwen.com/subject/jhvlattx.html