有关Web常用字体的研究?
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;
使用规范
- 英文字体优先指定
- 先给出中文字体的英文表示,再给出中文表示
- 最后使用 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 Neue
为Helvetica
的改善版本,且增加了更多不同粗细与宽度的字形,共拥有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 社区现有的最佳简体中文字体。
参考资料:
有关Web常用字体的研究?的更多相关文章
- 网页设计中常用的19个Web安全字体
来自http://www.jb51.net 在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体.但多数情况 ...
- 网页设计中常用的Web安全字体
但多数情况下,考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写,这里整理了19个Web安全字体,让你无需任何顾虑的情况下畅快使用. 1, Arial 微软公司的网页核心字体 ...
- Web中常用字体介绍(转)
1.在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体. 浏览器中展示网页文字内容时,文字字体都会按照设计 ...
- Web中常用字体介绍
1.在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体. 浏览器中展示网页文字内容时,文字字体都会按照设计 ...
- 在前端页面中使用@font-face来显示web自定义字体【转】
本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现, ...
- 中文字体名称对照表(unicode码)及20个web安全字体
在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体.但多数情况下,考虑各个因素的影响我们还是在尽量充分利用 ...
- 超级有用的各类web常用手册
以下是链接地址: 各种web常用手册
- 移动web调式利器---Rosin研究
移动web调式利器---Rosin研究 阅读目录 关于Rosin Rosin在Fiddler中如何使用 回到顶部 一:关于Rosin Rosin是Fiddler的一个插件,它能接受页面中的JS的con ...
- css3之@font-face---再也不用被迫使用web安全字体了
1,@font-face 的出现在没有css3之前,我们给网页设计字体只能设置web安全字体,使得我们的网页表现看上去好像都是那个样子,那么如果我们想给字体设置web设计者提供的字体呢?没有问题,cs ...
随机推荐
- 轻松搭建Xposed Hook
0x2.导入xposed库文件XposedBridgeApi-XX.jar,将库文件放在app/lib目录下,自己创建一个lib目录,别放在libs目录下,否则会出错,然后导入库,修改 Scope 为 ...
- HDU 1162 Eddy's picture (最小生成树)(java版)
Eddy's picture 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1162 ——每天在线,欢迎留言谈论. 题目大意: 给你N个点,求把这N个点 ...
- Java:字节流和字符流(输入流和输出流)
本文内容: 什么是流 字节流 字符流 首发日期:2018-07-24 什么是流 流是个抽象的概念,是对输入输出设备的抽象,输入流可以看作一个输入通道,输出流可以看作一个输出通道. 输入流是相对程序而言 ...
- 编程经验点滴----在 Oracle 数据库中保存空字符串
写程序这么多年,近几天才发现,向 Oracle 数据库表中,保存空字符串 '' ,结果成了 null. 由于数据库数值 null 的比较.判断,与空字符串 '' 存在差异.一不留神,代码中留下了 bu ...
- 移动Web前端,游客点击商品的收藏按钮,登录完成,回来之后,如何自动收藏
我们都知道,移动Web端(M站环境下),很多时候,前端是无法判断用户的登录状态的,因为出于安全性考虑,与账号相关的cookie字段一般都是 http-only的. 如果前端想判断用户的登录状态,需要主 ...
- java 获取当前系统可用字体名称
//获取系统的字体 public static void getLocalFontFamily(){ GraphicsEnvironment ge=GraphicsEnvironment.getLoc ...
- js实现复选框的全选、全不选和反选
js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...
- EOS智能合约开发(三):EOS创建和管理账号
没有看前面文章的小伙伴可以看一下 EOS智能合约开发(一):EOS环境搭建和启动节点 EOS智能合约开发(二):EOS创建和管理钱包 创建好钱包.密钥之后,接下来你就可以创建账号了,账号是什么?账号保 ...
- 内核线程的进程描述符task_struct中的mm和active_mm
task_struct进程描述符中包含两个跟进程地址空间相关的字段mm, active_mm, struct task_struct { // ... struct mm_struct *mm; st ...
- JavaScript实现元素拖动性能优化
前言:前几天没事干写了个小网站,打算用原生的javascript实现元素的拖动,但是事情并没有想象的那么顺利,首先是实现了拖动的元素卡的不能再卡,简直不能够,上图~~ 看见没?这就是效果,简直让人欲哭 ...