小小的字体其实有大大的学问,可能与字体相关的很多知识都偏设计,不过俗话说技多不压身,艺高人胆大,多了解了解总归没错。
就 Web 常用的一些字体而言,经常听说的字体类型,大致可以分为这几种:
其实大体上分为衬线字体和无衬线字体,等宽字体中也有衬线等宽和无衬线等宽字体,这 5 个分类是 font-family 的 5 个可用字体系列取值。
也就是说,上述 5 个名字,代表的并非某个特定字体,而是一系列字体,这些通用的名称允许用户代理(通常就是浏览器)从相应集合中选择一款字体。
这也很好解释了,font-family 中的 family ,家庭的意思,也就是不单单指一个,而是可以指定多个,上述 5 个英文单词都是 font-family 的可用取值,下文还会详细讲到。
下面详细了解一下每类字体。(本来每一个字体都有贴示意图的,无奈博客园摆出来太影响美观,可以移步我的Github阅读)
serif,意为有衬线的字体,衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰,而且笔画的粗细会有所不同,这些细节在大写字母中特别明显。
OK,那么有哪些常用字体属于衬线字体呢?
Windows 下大部分浏览器的默认中文字体,是为适应印刷术而出现的一种汉字字体。笔画有粗细变化,是一种衬线字体,宋体在小字号下的显示效果还可以接受,但是字号一大体验就很差了,所以使用的时候要注意,不建议做标题字体使用。
Mac 平台 Safari 下默认的英文字体,是最常见且广为人知的西文衬线字体之一,众多网页浏览器和文字处理软件都是用它作为默认字体。
sans 的意思是无,sans-serif 也就是无衬线的意思。专指西文中没有衬线的字体,与汉字字体中的黑体相对应。与衬线字体相反,该类字体通常是机械的和统一线条的,它们往往拥有相同的曲率,笔直的线条,锐利的转角。
中文下,无衬线字体就是黑体,黑体字也就是又称方体或等线体,没有衬线装饰,字形端庄,笔画横平竖直,笔迹全部一样粗细。
看看又有哪些常见的无衬线字体。
大名鼎鼎的微软雅黑相信都不陌生,从 windows Vista 开始,微软提供了这款新的字体,一款无衬线的黑体类字体,显著提高了字体的显示效果。现在这款字体已经成为 windows 浏览器最值得使用的中文字体。
属于同一字体家族系列,MAC OS X 10.6 之前的简体中文系统界面的默认中文字体,正常粗细就是华文细黑,粗体下则是华文黑体。
从 MAC OS X 10.6 开始,黑体-简代替华文黑体用作简体中文系统界面默认字体,苹果生态最常用的字体之一,包括 iPhone、iPad 等设备用的也是这款字体。
又叫苹果丽黑,Hiragino 是字游工房设计的系列字体名称。是一款清新的专业印刷字体,小字号时足够清晰,Mac OS X 10.6 开始自带有 W3 和 W6 。
被广泛用于全世界使用拉丁字母和西里尔字母的国家。Helvetica 是苹果电脑的默认字体,微软常用的Arial 字体也来自于它。
Windows 平台上默认的无衬线西文字体,有多种变体,比例及字重(weight)和 Helvetica 极为相近。
无衬线字体,优点在于它在小字上仍结构清晰端整、阅读辨识容易。
十分常见的无衬线字体,字体结构和 Verdana 很相似,其字元间距较小,而且对 Unicode 字集的支持范围较大。许多不喜欢 Arial 字体的人常常会改用 Tahoma 来代替,除了是因为 Tahoma 很容易取得之外,也是因为 Tahoma 没有一些 Arial 为人诟病的缺点,例如大写“i”与小写“L”难以分辨等。(这里故意反过来写)。
这系列字体程序员们其实都不陌生。我们用来敲代码的编辑器,字体的选择经常就是一类等宽字体。
等宽字体是指字符宽度相同的电脑字体,常见于 IDE 或者编辑器中,每个字母的宽度相等,通常用于计算机相关书籍中排版代码块。
除了 IDE ,我们看到的技术文章中的代码块中,经常也是使用等宽字体进行排版。
这是一套等宽的字体,属无衬线字体。这个字体使用了微软的 ClearType 字型平滑技术,主要是设计做为代码的显示字型之用,特别之处是它的“0”字加入了一斜撇,以方便与字母“O”分辨。
ClearType:由微软在其操作系统中提供的屏幕亚像素微调字体平滑工具,让 Windows 字体更加漂亮。在 Windows XP 平台上,这项技术默认是关闭,到了Windows Vista 才默认为开启。
上图是 Github 代码区块的字体设置,可以看到,默认字体就是 Consolas ,紧接着的几个都是其它等宽字体,如果用户的系统中都没有预装这些字体,则会匹配最后一个 monospace ,它表示等宽字体系列,会从用户系统中的等宽字体中选取一个展示。
fantasy和 cuisive 字体在浏览器中不常用,在各个浏览器中有明显的差异。
一些中文字体,例如font-family: '宋体',由于字符编码的问题,少部分浏览器解释这个代码的时候,中文出现乱码,这个时候设定的字体无法正常显示。
所以通常会转化成对应的英文写法或者是对应的 unicode 编码,font-family:'宋体' -> font-family: '\5b8b\4f53'。
\5b8b\4f53 是宋体两个中文字的 unicode 编码表示。类似的写法还有:
Unicode编码: 人们希望在一套系统里面能够容纳所有字符,Unicode 编码解决传统的字符编码方案的局限性,每个字符占用 2 字节。这样理论上一共最多可以表示2^16(即65536)个字符。基本满足各种语言的使用。
其他一些小细节也很重要,譬如定义字体的时候,何时需要在字体两端添加引号?像这样:
p{
font-family: 'Microsoft YaHei', '黑体-简', '\5b8b\4f53';
}
当字体名字中间有空格,中文名字体及 Unicode 字符编码表示的中文字体,为了保证兼容性,都建议在字体两端添加单引号或者双引号。
字体定义顺序是一门学问,通常而言,我们定义字体的时候,会定义多个字体或字体系列。举个栗子:
body {
font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}
别看短短 5 个字体名,其实其中门道很深。解释一下:
嗯,其实上面的 font-family 就是淘宝首页 body 的字体定义,非常的规范,每一个字体的定义都有它的意义。
综上,总结一下,我觉得字体 font-family 定义的原则大概遵循:
中文或者西文(英文)都要考虑到。
由于大部分中文字体也是带有英文部分的,但是英文部分又不怎么好看,同理英文字体中大多不包含中文。
所以通常会先进行英文字体的声明,选择最优的英文字体,这样不会影响到中文字体的选择,中文字体声明则紧随其次。
选择字体的时候要考虑多操作系统。例如 MAC OS 下的很多中文字体在 Windows 都没有预装,为了保证 MAC 用户的体验,在定义中文字体的时候,先定义 MAC 用户的中文字体,再定义 Windows 用户的中文字体。其次很多人都不知道 Android 下没有预装微软雅黑和宋体,那么 Android 机型下的中文字体设置又是很考究的。
当使用一些非常新的字体时,要考虑向下兼容,兼顾到一些极旧的操作系统,使用字体族系列 serif 和sans-serif 结尾总归是不错的选择。
来源:https://www.cnblogs.com/coco1s/p/6253154.html
当我们在浏览一些网站时发现,里面含有一些十分个性的字体,这些字体并不是我们电脑上安装的字体。那么css是如何实现自定义字体的呢?在css3中可以通过@font-face模块,把自己定义的Web字体嵌入到你的网页。
JavaScript禁止中文输入可以通过设置输入框的css样式的ime-mode属性来实现。也可以通过控制输入字符来禁止输入中文。.
最近做项目时,UI设计的字体10px,看效果图时发现字体仍然蛮大,改变12px时字体还是那么大,改变到14px时,字体变大了,发现规律,才知道原来浏览器为了让用户字体看的清楚,最小设置为12px。怎么办?设计就是10px?
Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset= 信息,这一般有最高的优先级;网页本身 meta header 中的 Content-Type 信息的 charset 部分,对于 HTTP 头未指定编码或者本地文件,一般是这么判断;假如前两条都没有找到,浏览器菜单里一般允许用户强制指定编码;
font-size:字体大小,说明用于设置字号,属性的值推荐使用像素单位px或者em;font-family:字体用于设置字体类型,网页中常用的字体有宋体、微软雅黑(microsoft yahei)、黑体等。
大家都知道设置font-size小于12px;的时候,显示都为12px。无法实现更小的字体了,但是面对UI图的时候出现小于10px的字体,第一想到的就是把字体直接作为图片显示到页面
我们学习 HTML 的时候学过一些用于字体加粗、倾斜的标签,但是使用标签来实现的效果肯定没有我们通过 CSS 中的样式来的方便。
UI设计图有华文黑体,担心客户端没有该字体,将huawen.ttf字体文件,放入项目中:创建一个font.scss(或font.css)文件:在main.js中引入就可以直接使用了
最近在用canvas绘图时遇到了一个令人头痛的问题:canvas绘制网络字体时没效果,遂开始了一番解决方案查找测试,中间也碰到了不少坑,于是写下此篇文章做个总结,如果大家在用canvas时遇到了同样的问题,希望对大家有一定的帮助
微信webview内置了调整字体大小的功能,用户可以根据实际情况进行调节。但是这也会导致字体大小改变以后,出现页面布局错乱的情况。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!