Windows自带字体:

  • 黑体:SimHei
  • 宋体:SimSun
  • 新宋体:NSimSun
  • 仿宋:FangSong
  • 楷体:KaiTi
  • 仿宋GB2312:FangSongGB2312
  • 楷体GB2312:KaiTiGB2312
  • 微软雅黑:Microsoft YaHei (win7以上)

安装Office多出的字体:

  • 隶书:LiSu

  • 幼圆:YouYuan

  • 华文细黑:STXihei

  • 华文楷体:STKaiti

  • 华文宋体:STSong

  • 华文中宋:STZhongsong

  • 华文仿宋:STFangsong

  • 方正舒体:FZShuTi

  • 方正姚体:FZYaoti

  • 华文彩云:STCaiyun

  • 华文琥珀:STHupo

  • 华文隶书:STLiti

  • 华文行楷:STXingkai

  • 华文新魏:STXinwei

可爱的英文字体

font-family: Comic Sans MS, "Comic Sans MS", Arial, sans-serif;

使用规范

  1. 英文字体优先指定
  2. 先给出中文字体的英文表示,再给出中文表示
  3. 最后使用 serif ,使得前面字体均无效时,字体由系统自行决定。

绝大部分中文字体里都包含英文字母和数字,不进行英文字体声明是没有问题的。

但是大多数中文字体中的英文和数字的部分都不是特别漂亮,所以建议也对英文字体进行声明。
由于英文字体中大多不包含中文,我们可以先进行英文字体的声明。

这样不会影响到中文字体的选择,因此优先使用最优秀的英文字体,中文字体声明则紧随其次。

font-family规则:

font-family:Verdana,"黑体",sans-serif;

按照W3C标准,浏览器在解析一行代码时首先会在系统中查找Verdana字体,

如果系统内存在这个字体那么浏览器就会使用Verdana字体,

如果没有的话就接着查找黑体,以此类推直到浏览器可以表达系统存在的字体为止。

注意:“sans-serif”不是某个字体的名称,而是一种在前面叙述的字体都无效时而最终选用的字体,称为浏览器通用字体,它取决于你所用的浏览器默认的通用字体是什么。

font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;

Arial字体不认识中文,只认识英文,所以,它只能渲染英文数字和一些特殊符号,而页面中的中文就会自动调用后面设置的Microsoft YaHei

示例:

例1(小米):
font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi MicroHei",sans-serif; 
例2(淘宝技术研发中心):
font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif; 
例3(简书):
font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
例4(加网 ):
font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;
例5(淘宝UED):
font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
其它
font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
 

字体何时需要添加引号

1、当字体具体某个取值中若有一种样式名称包含空格,则需要用双引号或单引号表示,如:

font-family: "Microsoft YaHei", "Arial Narrow", sans-serif;
2、如果书写中文字体名称为了保证兼容性也会添加引号,如:
font-family: "黑体-简", "微软雅黑", "文泉驿微米黑";

Web常用字体?

 Verdana

推荐10px的Verdana来做英文正文字体,字号最好介于10~14像素之间,超出这个范围不好看。

Verdana应用广泛。易于阅读。是显示器中最清晰的字体,即使字号很小,也很容易阅读。微软公司的网页核心字体之一,微软公司专门为屏幕显示而开发的。

Georgia
可用性好。可读性比Times New Roman强。是网站设计中,浏览效果最好的serif字体,因为它是专为网上阅读设计的。

 Times New Roman
可能是最常用的serif字体,是网站浏览器默认的字体,12pt以上的字体容易阅读,但小字号的字体易读性差。

(苹果系统没有这个字体,有一个对应于Times New Roman的字体叫Times)

Arial

最常用的sans serif字体,当字号很小时不容易阅读。

大写的“I”和小写的“l”不好区分,可以考虑用Tahoma字体来替代。

Trebuchet MS
与Arial相似,Trebuchet MS比Arial看起来优雅、古典一点。

推荐用来做标题,因为小字号阅读起来会很困难,不太推荐用来做正文字体,(低于13px阅读起来就很累了)。在苹果系统上可以用Helvetica做替代。

Tahoma
Tahoma常见的无衬线字体,微软在1999年推出,被采用为Windows 2000、Windows XP、Windows Server 2003等系统的默认字型。

它的字体结构和Verdana很相似,其字符间距较小。

用来作为标题,效果好过Arial(Tahoma的大写I 和小写l比Arial容易识别),

如果作为正文,他的字号不能小于13PIX,否则很多笔画粘连到一起,不利于阅读。

 

Comic Sans MS
手写体。比较的随意字体,可以变换一下口味,建议不要用在正规的金融、政府、商业机构站点。

 

Impact

字体较为粗犷,适合使用在标题上,而不常用在内文。
Impact是1965年发表的一个无衬线字体,其特粗的笔画、紧缩的间距。

Courier New
老式打印机字体,有一种独特的机械工整感觉。

呈现计算机编码时,还会用到这种字体。

12 pt的Courier New字体曾是美国国务院的公文标准字体,但于2004年1月停用,改使用14 pt的Times New Roman,因为其具“现代性”和“易读性”。

 

Courier
Courier是一个等宽字体的粗衬线字体,主要是依据打字机所打印出来的字型来设计。

原来Courier New的字体是IBM公司在1950年代设计给打印机使用的字体,后来这个字型成为整个打字机制造业的标准。

Courier New是Courier的变体,比Courier更具机械味道。

Helvetica、Helvetica Neue

一种被广泛使用的西文字体,该字体也一直伴随着苹果用户,是苹果生态中最常用的西文字体。

Helvetica NeueHelvetica的改善版本,且增加了更多不同粗细与宽度的字形,共拥有51种字体版本,极大的满足了日常的使用。

 Hiragino Sans GB 

冬青黑体,听说又叫苹果丽黑,日文字体Hiragino KakuGothic的简体中文版。

简体中文有 常规体和 粗体 两种,冬青黑体是一款清新的专业印刷字体,小字号时足够清晰,拥有很多人的追捧。

Heiti SC

黑体-简,从 10.6 开始,黑体-简代替华文黑体用作简体中文系统界面默认字体,苹果生态最常用的字体之一。

包括iPhone、iPad等设备用的也是这款字体,显示效果不错,但是喇叭口设计遭人诟病。

PingFang SC

苹方,在Mac OS X EL Capitan上,苹果为中国用户打造了一款全新中文字体--苹方。

去掉了为人诟病的喇叭口,整体造型看上去更加简洁,字族共六枚字体:极细体、纤细体、细体、常规体、中黑体、中粗体

 Lucida Grande

一种西文无称线字体,是苹果公司操作系统Mac OS X的默认西文字体

Lucida Sans Unicode
是一种OpenType型的无衬线字体 。有较大的x字高,具有很好的可读性,被广泛用于显示、出版等各种用途。
它支持Unicode2.0版本的基本字符,包括拉丁字母,希腊字母,西里尔字母,希伯来字母,以及国际音标字符。

该字体是首个 Unicode代码的字体, 该字体从Windows 98开始一直作为系统预装字体发行。
后来发布的 Lucida Grande字体作为苹果公司Mac OS X系统的默认字体发布。

WenQuanYi Microhei

文泉驿微米黑,几乎是 Linux 社区现有的最佳简体中文字体。

参考资料:

网页设计中常用的19个Web安全字体

常用网页字体

如何优雅的选择字体

Web 中文字体应用指南

"5b8b4f53"的意思

如何保证网页的字体在各平台都尽量显示为最高质量的黑体?

有关Web常用字体的研究?的更多相关文章

  1. 网页设计中常用的19个Web安全字体

    来自http://www.jb51.net 在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体.但多数情况 ...

  2. 网页设计中常用的Web安全字体

    但多数情况下,考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写,这里整理了19个Web安全字体,让你无需任何顾虑的情况下畅快使用. 1,  Arial 微软公司的网页核心字体 ...

  3. Web中常用字体介绍(转)

    1.在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体. 浏览器中展示网页文字内容时,文字字体都会按照设计 ...

  4. Web中常用字体介绍

    1.在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体. 浏览器中展示网页文字内容时,文字字体都会按照设计 ...

  5. 在前端页面中使用@font-face来显示web自定义字体【转】

    本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现, ...

  6. 中文字体名称对照表(unicode码)及20个web安全字体

    在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体.但多数情况下,考虑各个因素的影响我们还是在尽量充分利用 ...

  7. 超级有用的各类web常用手册

    以下是链接地址: 各种web常用手册

  8. 移动web调式利器---Rosin研究

    移动web调式利器---Rosin研究 阅读目录 关于Rosin Rosin在Fiddler中如何使用 回到顶部 一:关于Rosin Rosin是Fiddler的一个插件,它能接受页面中的JS的con ...

  9. css3之@font-face---再也不用被迫使用web安全字体了

    1,@font-face 的出现在没有css3之前,我们给网页设计字体只能设置web安全字体,使得我们的网页表现看上去好像都是那个样子,那么如果我们想给字体设置web设计者提供的字体呢?没有问题,cs ...

随机推荐

  1. ionic 确认提示操作框

    //确认框 .factory('ActionSheet', function ($ionicActionSheet, TipsPort, Service,Loading) { var ActionSh ...

  2. The value of ESP was not properly saved across a function call 快速解决

    The value of ESP was not properly...快速解决 今天遇到这个问题,真的是非常头疼,期间电脑居然崩掉一次.所以,分享一下解决办法. 如果是:类定义的时候,新添加了属性, ...

  3. codeforces 735C Tennis Championship(贪心+递推)

    Tennis Championship 题目链接:http://codeforces.com/problemset/problem/735/C ——每天在线,欢迎留言谈论. 题目大意: 给你一个 n ...

  4. python之restful api(flask)获取数据

    需要用到谷歌浏览器的扩展程序 Advanced Rest Client进行模拟请求 1.直接上代码 from flask import Flask from flask import request ...

  5. Spark WordCount 文档词频计数

    一.使用数据 Apache Spark is a fast and general-purpose cluster computing system.It provides high-level AP ...

  6. SQL Server "允许远程连接到此服务器" 配置

    在SQL Server的属性-->连接中我们可以看到这样一个选项:'允许远程连接到此服务器'(英文是remote access),其默认值是1,表示此选项开启. 但是这个参数并非是字面上所显示的 ...

  7. 负载均衡(nginx、dubbo、zookeeper)

    nginx dubbo zookeeper

  8. Python 提案

    学习Java 不可不知JSR,学习Python自然也得知道 PEP了 1- PEP简介 PEP是Python增强提案(Python Enhancement Proposal)的缩写.https://w ...

  9. 讲解wpe抓包,封包

    相信大多数朋友都是会使用WPE的,因为这里也有不少好的教程,大家都辛苦了!先说说接触WPE的情况.当时好像是2011年,我本来不知道WPE对游戏竟有如此大的辅助作用的.起先找WPE软件的时候,只是因为 ...

  10. Dockfile制作镜像

    讲一个简单的案例 @哈希码用来校验,这样子会安全 MAINTANIER可能将会被LABEL代替,仅仅说说明一下镜像信息罢了. 1.首先是我们创建一个镜像 [root@ELK-chaofeng08 ~] ...