zoukankan      html  css  js  c++  java
  • 页面中常用字体 【转】

    英文

    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下的默认中文。
    • Droid Sans和衍生的WenQuanYi Microhei:Andriod中的中文,也是Linux绝大多数发行版本的默认中文,,当然也有用WenQuanyi Zenhei的,不过比较少了。

    注意:CSS3开始支持Embedded font所以英文字体选择一下子多了很多,而中文字体由于文件庞大,仍然就是那几个选。

    网页字体效果

    Georgia
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (22px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    Impact
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (22px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    Verdana
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    Trebuchet MS
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    微软雅黑
    24px 微软雅黑 中文字体 加粗中文字体 ©一方天
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    20px 微软雅黑 中文字体 加粗中文字体 ©一方天
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    宋体
    26px 宋体 中文字体 加粗中文字体
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    18px 宋体 中文字体 加粗中文字体
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    黑体 * 慎用加粗
    26px 黑体 中文字体 加粗中文字体
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    18px 黑体 中文字体 加粗中文字体
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
    abcdefghijklmnopqrstuvwxyz 0123456789

    英文非等宽字体

    Arial
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    Comic Sans MS
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ 10px
    abcdefghijklmnopqrstuvwxyz 0123456789
    Georgia
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    Tahoma
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    Time News Roman
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    Trebuchet MS
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    Verdana
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
    abcdefghijklmnopqrstuvwxyz 0123456789

    英文等宽字体

    Courier New
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    Hei
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    Monaco
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    simhei
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
    abcdefghijklmnopqrstuvwxyz 0123456789

    中文字体

    宋体
    14px 宋体 中文字体 加粗中文字体
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    12px 宋体 中文字体 加粗中文字体
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    微软雅黑
    14px 微软雅黑 中文字体 加粗中文字体
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    12px 微软雅黑 中文字体 加粗中文字体
    ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
    abcdefghijklmnopqrstuvwxyz 0123456789
    MingLiU 11px 中文字
    11px清晰中文字体 加粗中文字体 (11px)
    PMingLiU 11px 中文字
    11px清晰中文字体 加粗中文字体 (11px)
    常见11px使用范例:Tahoma,Verdana,Arial,PMingLiu,MingLiu
    11px清晰中文字体 加粗中文字体 (11px)
    MS UI Gothic 10px 中文字
    據說這種字體繁體中文會顯示得稍微好一點,但都看不怎麽清楚(10px)
  • 相关阅读:
    Linuxboot:linux as UEFI,linux over UEFI
    在阿里云上安装黑苹果的一种设想
    Dsm as deepin mate(3):离线编辑初始镜像,让skynas本地验证启动安装/升级
    硬件融合的新起点:虚拟firmware,avatt的编译(2)
    将虚拟机集成在BIOS和EFI层,vavvt的编译(1)
    2013.08.19—2013.08.23周总结
    关于自我介绍
    Java入门系列:实例讲解ArrayList用法
    Hadoop文件的基本操作
    继承关系的理解
  • 原文地址:https://www.cnblogs.com/baota/p/6634642.html
Copyright © 2011-2022 走看看