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"的意思?

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

转载于:https://www.cnblogs.com/shiy/p/6608122.html

有关Web常用字体的研究?相关推荐

  1. IOS、Android、WP移动平台浏览器下常用字体支持度研究

    做了近一年的无线项目,总觉得少了点什么,对,是总结和研究,一直在追随前人的脚步,在他人的经验中获取认知,恐怕做得越多只会觉得得过且过的感觉越深刻,最近终于有空闲的时间来做一些研究和总结了. webap ...

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

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

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

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

  4. Web中常用字体介绍

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

  5. 网页中常用的web安全字体

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

  6. Web中常用字体介绍(ios和android浏览器支持的字体),Mark以后留用

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

  7. web使用字体包_如何使用跨浏览器Web字体,第2部分

    web使用字体包 介绍 (Introduction) In part 1 of my article (https://www.sitepoint.com/how-to-use-cross-brows ...

  8. WEB中文字体应用指南

    http://www.fontsquirrel.com/fontface @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现 ...

  9. 字体设置_word字体设置:如何为常用字体设置快捷键

    编按:最近,有位同学问我,怎样在Word文档中默认使用自己喜欢的字体,而不需要每次反复的设置,我告诉他2个方法,分分钟帮他解决了困扰.今天在这里就将这2个小技巧分享给需要的你们,一起来看看吧! ​** ...

最新文章

  1. C# 代码注释规范文档
  2. java 优雅退出_java – 优雅地退出应用程序?
  3. 谈吉日嘎拉的《白话反射技术》及其他(吵架篇)
  4. MySQL-获取有性能问题SQL的方法_慢查询 实时获取
  5. 儿童猜词游戏图片_超实用的儿童社交游戏分享(听指令、认知、规则)
  6. 对象方法Android之多媒体使用——MediaPlayer播放音频
  7. 论文浅尝 - AAAI2021 | 从历史中学习:利用时间感知拷贝生成网络建模时态知识图谱...
  8. 【Python配置】Win10配置Python3、Numpy、PyCharm、Anaconda
  9. 系统分析和设计方法之系统分析
  10. R语言机器学习系列-决策树回归代码
  11. 数字游戏-SSL 1653
  12. 微软亚洲研究院全球院友线上欢聚,共话新春
  13. Godaddy域名push教程(域名转出教程)
  14. 初探PHP开源采集器----蓝天采集器
  15. 网络工程师学习Linux的亲身历程
  16. cwber获取html,qq飞车手游CW、CWW、WCW怎么触发方法
  17. html2canvas给图片添加水印,小程序用Canvas给图片加水印,拼接图片,制作名片
  18. 录屏,webm格式转gif的小技巧
  19. 高用户体验,减少跳出率
  20. 【设计模式学习笔记】类图:类与类之间的关系

热门文章

  1. java宝典_java宝典
  2. Go语言?对微信约战棋牌网站搭建新技术怎么看?
  3. 985、211学校分为哪八个档次?
  4. 绿盟科技c语言笔试,绿盟科技全国统一笔试题
  5. 爱立信语言交换机eMG800ucp使用方法
  6. [siggraph2011]Secrets of CryENGINE 3 Graphics Technology
  7. 3DMax 建模注意点
  8. 【python】制作商品历史价格查询
  9. drds 解决问题_C++应用适配DRDS小结
  10. 中文java_java中文编程