一、衬线字体与非衬线字体


衬线体(serif)和无衬线体(sans-serif)的分类起源于英文字体界。
衬线体(serif)-Georgia-Times

「衬线」指的是字形笔画在首位的装饰和笔画的粗细不同,所以「衬线」又被称为「字脚」。

衬线体又可以根据衬线变化可以分成三类:
具有特定曲线衬线的「支架衬线体」(bracket serif)
连接处为细直线的「发丝衬线体」(hairline serif)
厚粗四角形的「板状衬线体」(slab serif)

无衬线体(sans-serif)-Helvetica-Arial-Verdana-Tahoma-Trebuchet MS

而无衬线体则没有笔画首尾的装饰,所有笔画的粗细也相同。无衬线体在 80 年代开始兴起,在当时被称为 Grotesque(荒唐的)或 Gothic(哥特的),因为天然的技术感和理性气质,无衬线字体多为科技型企业所青睐。随着「简约美」理念开始风行,1957 年上市的 Folio、Helvetica 和 Univers 三个极具代表性的无衬线字型开始成为当代字型的主流。
因为无衬线的字体结构简单,在同等字号下,无衬线的字体看上去要比有衬线的更大,结构也更清晰,所以电子设备的屏幕上也偏好使用无衬线字体。

中文界的衬线体与无衬线体

而在中文字体界,两个有代表性的分类——宋体和黑体,分别对应着衬线字体和无衬线字体。

具体见:https://www.zhengjie.com/answer/3777BC00

二、在MacOS-chrome中的显示效果(实测)


web字体分析的更多相关文章

  1. Web 字体 font-family 再探秘

    之前写过一篇关于Web字体简介及使用技巧的文章: 你该知道的字体 font-family. 该篇文章基本没有太多移动端的字体选择及分析.并且过了这么久,如今的 Web 字体又有了一些新的东西,遂有此文 ...

  2. Monotype推出基于HTML5的Web字体平台

    著名字体公司Monotype近日宣布推出基于HTML5的Web字体平台,设计者可以访问近10万字体的目录. Monotype推出基于HTML5的Web字体平台 Monotype推出基于HTML5的We ...

  3. 如何把你的图标转换成web字体

    在这篇教程中,我们将使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体,然后将生成的字体通过css应用到Web页面中. 通常我们在网站中必不可少的会使用到一些小图标.在正常尺寸下,布局 ...

  4. 制作web字体:CSS3 @font-face

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,另外@font- ...

  5. 10 个强大的开源 Web 流量分析工具(转帖)

    Web 流量分析工具多不胜数,从 WebTrends 这样专业而昂贵的,到 Google Analytics 这样强大而免费的,从需要在服务器端单独部署的,到可以从前端集成的,不一而足.本文收集并介绍 ...

  6. 几种web字体格式

    目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体 ...

  7. web设计经验<七>13步打造优雅的WEB字体

    今天,大多数浏览器已经默认支持Web字体,日趋增多的字体特性被嵌入最新版HTML和CSS标准中,Web字体即将迎来一个趋于复杂的崭新时代.下面是一些基本的关于字体的规则,特别适用于Web字体. 原文地 ...

  8. CSS3:不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  9. 海量WEB日志分析

    Hadoop家族系列文章,主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, Pig, HBase, Sqoop, Mahout, Zookeeper, Avro, Ambari, ...

随机推荐

  1. Intellij IDEA更改项目优先编译顺序

    今天启动公司项目突然发现了一个问题,类里面明明有这个方法,但是无论怎样都不编译.(由于公司项目是二次开发,代码都是第三方写的,代码请勿仔细看,怕伤了你的眼睛.) 如图,找不到setJGMC方法. 但是 ...

  2. 谷歌浏览器把网页打印成pdf

    一.认识markdown mweb for mac2.2.7 激活版 二.pdf和word pdf的可移植性比较好,在不同的操作系统中都能打开,而且安全,但是可编辑性不好,所以通常用markdown编 ...

  3. BigDecimal使用中的一些注意事项

    Java的商业计算,不能用float和double,因为他们无法进行精确计算.但是Java的设计者给编程人员提供了一个很有用的类BigDecimal,他可以完善float和double类无法进行精确计 ...

  4. Java笔记(十一)通用容器类和总结

    通用容器类和总结 一.抽象容器类 一)AbstractCollection 提供了Collection接口的基础实现,具体来说,实现了如下方法: public boolean addAll(Colle ...

  5. HQL实用技术

    HQL是Hibernate Query Language的缩写,提供更加丰富灵活.更为强大的查询能力:HQL更接近SQL语句查询语法. HQL基础查询  1.获取部分列 多列 /** * 获取部分列 ...

  6. [NOI2014]起床困难综合征

    Description: 有n扇门,每扇门上有一个位运算符(&,|,^) 和一个权值,要求合理的选择一个不超过m的数,使其按顺序经过这些门的运算后最大 Hint: \(n \le 10^5\) ...

  7. = =用createJS写个flyppyPeople

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近flyppybird很流行啊,今天中午闲着没事干,就用现有的素材写了个flyppyPeople,因为角色是个人,所以就叫People啦 ...

  8. BZOJ4133 : Answer的排队

    设$f[i][j]$表示考虑前$i$个人,第$i$个人在前$i$个人中排名为$j$的方案数. 对于大小关系相同的一段,转移可以看成求$k$次前/后缀和,任意一项对另一项的贡献仅和其下标差值有关,FFT ...

  9. eclipse 导入android 项目重名解决方法

    在进行andoid 开发时会用到许多的开源框架,但有时候发现几天框架的项目名字都是 library. 解决方法: 1.如果项目中没有 .project 文件,直接修改项目文件夹的名字即可,注意在你引用 ...

  10. vim小技巧2

    yyp:复制当前行到下一行 cw:改变当前字符串 xp:交换当前字符和右边字符