Web中常见字体样式详细介绍(ios和android访问器适用

日期:2021-03-21 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

年底了,每日任务较为少,主管看我闲着,是否觉得很不自得啊。遂给我1个每日任务:调查1下ios和android机器设备所适用各种各样访问器适用的字体样式。1听“调查”俩字,我就头大了,我1个小程序流程员,又并不是搞商品的哪干过这样的活。好吧,按自身了解的意思来吧。

别看自身1直搞前端开发,实际上连最基本的字体样式类型都不知道道。科学研究了1天就发现自身专业知识宽阔了很多。忘了是哪位知名人士说过1句话了:在1个行业,无论是多么的微不足道的事,你坚持不懈10年,你就会变成这层面的权威专家。不空话了,如今把自身掌握的有关web字体样式层面的信息内容共享给大伙儿。

1、在Web编号中,CSS默认设置运用的Web字体样式是比较有限的,尽管在新版本号的CSS3,大家能够根据新增的@font-face特性来引进独特的访问器载入字体样式。

访问器中展现网页页面文本內容时,文本字体样式都会依照设计方案师在css中界定的字体样式族的次序来开展显示信息。甚么是字体样式族?字体样式族便是你在css编码中看到“font-family”的编码内的1类字体样式名字,比如下面这行编码:

拷贝编码
编码以下:

font-family:"Comic Sans MS","幼圆","黑体",sans-serif;

依照W3C规范,访问器在分析1行编码时最先会在系统软件中搜索Comic Sans MS字体样式,假如系统软件运行内存在这个字体样式那末访问器就会应用Comic Sans MS字体样式,假如沒有的话就接着搜索幼圆字体样式,以此类推直至访问器能够表述系统软件存在的字体样式为止。

留意了,“sans-serif”并不是某个字体样式的名字,而是1种在前面描述的字体样式都失效时而最后采用的字体样式,称为访问器通用性字体样式,它取决于你所用的访问器默认设置的通用性字体样式是甚么,将会是“Arial”,也是有将会是“Helvetica”。

2、网页页面常见字体样式一般分成5类:serif(衬线)、sans-serif(无衬线)、monospace(等宽)、fantasy(美好)、cuisive(草体),这些通用性的名字容许客户代理商从相应结合选中择1款字体样式。
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设计风格,略微开朗1点。Mac下的显示信息要比Win下好。
Verdana: 专业以便屏显而设计方案的字体样式,humanist设计风格,在小字号下仍能够清晰显示信息,可是字体样式细节缺少比较严重,最好是别做题目。
Tahoma: 也是humanist设计风格,字体样式和Verdana有点像,可是略窄1些,counter略小,以前是Windows的规范字体样式,Mac 10.5以后默认设置也是有安裝。
Trebuchet MS: 为微软设计方案的1个humanist设计风格字体样式,本人感觉个性化太过突显,用得不太好会不配。

Serif:

Georgia: 基础上合适文章正文屏显的衬线字体样式,非Georgia莫属了。笔划粗重,衬线明线,轮廊较大,小字体样式显示信息也很清楚,另外细节还算OK。
Times: Times是以便报纸而设计方案的,特性是能够在比较有限的室内空间塞进去更多的文本,笔划较弱,小字号文章正文屏显看起来累眼。以前Engadget改版的情况下用了Times做为文章正文,被骂得很惨以后换为了Georgia。

汉语:

宋体:Win最多见的字体样式,小字体样式点阵,大字体样式TrueType,可是大字体样式其实不漂亮,因此最好是别做题目。
微软雅黑:Vista以后新引进的字体样式,开启Cleartype以后显示信息实际效果非常好,不开Cleartype发虚。
华文细黑:Mac下的默认设置汉语。

4、写个小demo,在各种各样访问上检测了1下,各种各样访问器对这个字体样式的分析還是有差别的。

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf⑻">
<title>font</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="author" content="@my_programmer">
<style type="text/css">
/*重设{*/
*{ padding:0;margin:0;} img{border:0;} li{list-style:none;}
/*}重设*/
div{font-size:1.2em;}
</style>
</head>
<body>
<br/>
--网页页面字体样式一般分成5类--
<div style="font-family: sans-serif;">你好 hello world &nbsp;&nbsp; sans-serif(无衬线) </div>
<div style="font-family: serif;">你好 hello world &nbsp;&nbsp; serif(衬线) </div>
<div style="font-family: monospace;">你好 hello world &nbsp;&nbsp; monospace(等宽) </div>
<div style="font-family: fantasy;">你好 hello world &nbsp;&nbsp;&nbsp;&nbsp; fantasy(美好) </div>
<div style="font-family: cuisive;">你好 hello world &nbsp;&nbsp; cuisive(草体) </div>
<br/>
--无衬线类--
<div style="font-family: Helvetica, sans-serif;">你好 hello world &nbsp;&nbsp; Helvetica </div>
<div style="font-family: Arial, sans-serif;">你好 hello world &nbsp;&nbsp; Arial </div>
<div style="font-family: 'Lucida Grande', sans-serif;">你好 hello world &nbsp;&nbsp; Lucida Grande </div>
<div style="font-family: Verdana,sans-serif;">你好 hello world &nbsp;&nbsp; Verdana </div>
<div style="font-family: Tahoma, sans-serif;">你好 hello world &nbsp;&nbsp; Tahoma </div>
<div style="font-family: 'Trebuchet MS', sans-serif;">你好 hello world &nbsp;&nbsp; Trebuchet MS </div>
<br/>
--衬线类--
<div style="font-family: Georgia, serif;">你好 hello world &nbsp;&nbsp; Georgia </div>
<div style="font-family: Times, serif;">你好 hello world &nbsp;&nbsp; Times </div>
<br/>
--汉语字体样式--
<div style="font-family: 宋体">你好 hello world &nbsp;&nbsp; 宋体 </div>
<div style="font-family: 微软雅黑">你好 hello world &nbsp;&nbsp; 微软雅黑 </div>
<div style="font-family: 华文细黑">你好 hello world &nbsp;&nbsp; 华文细黑 </div>
<div style="font-family: 黑体">你好 hello world &nbsp;&nbsp; 黑体 </div>
</body>
</html>

在chrome上显示信息的結果

   

在ie8上显示信息的結果

      

在firefox上显示信息的結果

5、在此次检测中发现

android机器设备中各个访问器都很不给力(ios的都还没检测,我想毫无疑问也好不到哪去吧),android手机上中各个访问器适用的常见字体样式仅有3种:

sans-serif(无衬线)类 : Arial; //要是设定成sans-serif类,无论甚么字体样式,都1个模样。
serif(衬线)类 :Georgia;//要是设定成serif类,无论甚么字体样式,都1个模样。
monospace(等宽)类//要是设定成monospace类,无论甚么字体样式,都1个模样。

挪动机器设备的访问器还必须勤奋哦。