web字体
<span style="font-family:sans-serif">Lorem Ipsum</span>
<span style="font-family:sans-serif,Arial">Lorem Ipsum</span>第一种写法的错误在于——它相当于根本没有指定字体,仍旧是交由浏览器选择字体。写了相当于没写。
第二种写法的错误在于顺序。因为通用字体族应该在一个font set中其它所有字体都失效时才起作用。因此,将指定字体放在通用字体之后,会造成制定字体尚未匹配时就使用了通用字体。所以,你应该务必使通用字体处在font set中的最后一位。
serif
Serif 在印刷学上指衬线字体。为了理解衬线字体的概念,大家先看几个典型的衬线字体的例子:
My
Georgia字体King
Times New Roman 字体汉字
宋体
单词 My 中的字母 “M”上下方突出的短横线就是所谓的衬线。同样,y的上方,K的上下,i 和n的下方也都有衬线,所以这些字体都被称为衬线字体。但衬线字体并不一定都有衬线,比如上面例子中的g, “汉”和“字”。事实上,只要满足末端加强原则的字体都是衬线字体。所谓的末端加强,就是使用衬线或粗细变化,使字体笔画的末端得到加强,以改善小号文字的可读性。比如上面例子中的y的下半部分,还有宋体的中文字符,都是采取加粗笔划的末端来达到末端加强的效果。除此之外,很多衬线字体还会采用加强竖向笔划(比如宋体中竖比横粗),夸张字形(最明显的就是小写g这个字符了)等方法进一步改善它的可读性。
因为衬线字体的可读性非常好,所以它应用的最多的地方也正是出版物或者印刷品的正文内容等以大段文字作为表现形式的作品上。
比较常见的衬线字体有 Georgia, Garamond, Times New Roman, 中文的宋体等等。
- sans-serif
衬线字体以外的一切字体都是无衬线字体。sans- 这个前缀其实是法语,所以比较标准的发音是 /san/ 而不是 /sans/。它的意思是“没有”。所以sans-serif就是无衬线字体。
Gut
Verdana 字体Might
Arial 字体书写
幼圆
无衬线字体比较圆滑,线条一般粗细均匀。比较适合用作艺术字、标题等。因为无衬线字体通常粗细比较均匀,所以在小字体显示的时候,可读性会降低,容易引起视觉疲劳。
常见的无i衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。
web字体的更多相关文章
- Monotype推出基于HTML5的Web字体平台
著名字体公司Monotype近日宣布推出基于HTML5的Web字体平台,设计者可以访问近10万字体的目录. Monotype推出基于HTML5的Web字体平台 Monotype推出基于HTML5的We ...
- 如何把你的图标转换成web字体
在这篇教程中,我们将使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体,然后将生成的字体通过css应用到Web页面中. 通常我们在网站中必不可少的会使用到一些小图标.在正常尺寸下,布局 ...
- 制作web字体:CSS3 @font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,另外@font- ...
- 几种web字体格式
目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体 ...
- web设计经验<七>13步打造优雅的WEB字体
今天,大多数浏览器已经默认支持Web字体,日趋增多的字体特性被嵌入最新版HTML和CSS标准中,Web字体即将迎来一个趋于复杂的崭新时代.下面是一些基本的关于字体的规则,特别适用于Web字体. 原文地 ...
- CSS3:不可思议的border属性&Web字体图标Font Awesome
CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...
- css3 web字体记
css3 web字体 @font-face语法 @font-face能够加载服务器端的字体,让客户端浏览器显示客户端没有安装的字体. @font-face{ font-family:<YourW ...
- Web字体工具整理,网页图标字体以及使用方法整理
常用网站app logo 下载: http://www.iconfont.cn/collections/show/268?spm=a313x.7781069.0.0.nDYawz 1.Web字体免费生 ...
- ICOMOON!强悍的WEB字体图标制造器/Web字体使用实例
IcoMoon!一个可以通过个性化设置来创建自定义图标(字体)的生成器!也可以将SVG图片,转换成web字体 IcoMoon是一项免费的服务,通过使用不同设置使我们能够创建自定义的ICON图或ICON ...
- Web字体库下载及转换工具
1.字体现在网站: http://ztxz.org/ 2.Web字体在线格式转换器: http://www.freefontconverter.com/ 3.
随机推荐
- Lambda表达式与Function接口
Lambda表达式是一个匿名函数.C++ 11和 java 8 相继引入了有关对Lambda表达式的支持. Lambda表达式对于高级语言而言并不是必要的,对于Java而言它的功能和一个简易的接口差不 ...
- Remote Debugging Chrome 结合Genymotion模拟器的移动端web真机调试(转)
尝试了好多方法,刚开始想用bluestacks调试手机页面,不过在打开chrome的时候,会黑屏,什么也看不了.最后又是更新android系统,又是卸掉bluestacks重新安装,怎么都不行.最后没 ...
- memached 服务器lru算法
1.LRU是Least Recently Used的缩写,即最近最少使用页面置换算法,是为虚拟页式存储管理服务的.LRU算法的提出,是基于这样一个事实:在前面几条指令中使用频繁的页面很可能在后面的几条 ...
- [示例]NSDictionary编程题-字典的排序应用(iOS5班)
代码? #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepo ...
- 都是以父元素的width为参照物的
本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...
- HMM TOOL
HMM隐马尔科夫模型 MATLAB 工具包对各种数据的处理 HMM 工具包下载地址: http://www.cs.ubc.ca/~murphyk/Software/HMM/hmm.html 工具包使用 ...
- opencv+ffmpeg实现avi视频的播放
配了一天,终于成功的在ubuntu上安装了ffmpeg,实现了opencv对avi文件的读取. 在CvCapture* pCapture=cvCaptureFromAVI("video.av ...
- 【海量视频】2013年上半年BPM厂商'K2'市场活动资料集锦
3月01日 中广核K2 &SAP流程解决方案分享 活动报道:http://www.k2software.cn/k2events_content/items/k2-sap-346 ...
- 火狐和IE的window.event对象详解(转载)
FF的FIREBUG,不仅能测试JS还能检查CSS错误,是一般常用的. 但它主要检查FF方面的错误,对IE就无能为力了. 要测试IE,就用ieTester,它可以测试IE几乎所有版本(1.0恐怕也用不 ...
- Autolayout-VFL语言添加约束
一.VFL语言简洁 VFL(Visual format language)语言是苹果为了简化手写Autolayout代码所创建的专门负责编写约束的代码.为我们简化了许多代码量. 二.使用步骤 使用步骤 ...