CSS中的通用字体
往往设计师在设计时一厢情愿地去思考问题，那样会带来很多潜在的麻烦。事实上你可以为网页设计任意字体，包括艺术字体。也许你的计算机中已经安装了很多字体，但是不能够保证所有的浏览者都已经安装了相同的字体，因此，当你非常想使用各种个性字体或艺术字体美化页面时，你可以使用下面的方法来解决此类矛盾。
一种方法是在font-family属性设置你喜欢的字体，同时也定义一些备用字体。如果浏览者的系统中安装了指定的字体，就会看到漂亮的页面，如果没有，浏览器会自动搜索在font-family属性中指定的字体列表，直到找到备用字体为止。
另一种方法是为font-family属性指定通用字体。所谓通用字体，就是它表示一类字体，这样浏览器就能够根据你指定的字体类别从本地系统中找到类型相同的字体来解析网页文字。
也许你看到的字体成千上万，其显示的效果和风格也千差万别，例如，打印体、艺术体、手写体、象形体、卡通体、古典体等。但是几乎所有的字体都可以归为两类：serif和sans-serif。
serif类型的字体是成比例有衬线的字体。成比例是指字体中的所有字母根据它们不同的尺寸占据不同的宽度。例如，字母l和m所占的宽度是不同的。衬线是指字体上附加的装饰性细线。例如，小写字母l会在顶部和底部附加细小的“手”和“脚”。常用serif型字体有Times、Times New Roman、Georgia等。sans-serif类型的字体是有比例但是没有衬线的字体。常用的sans-serif类型字体有Arial、Helvetica等。例如，在下面的代码中，我们可以直观地比较serif和sans-serif类型字体的显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.p1{
font:36px "Times New Roman", Times, serif;
}
.p2{
font: 36px Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p class="p1">The World Wide Web Consortium ---serif</p>
<p class="p2">The World Wide Web Consortium ---serif</p>
</body>
</html>
serif类型的字体很适合在正文中使用，这些“手”和“脚”装饰线很容易把一行内所有的字母联系在一起，使浏览者的视线随着这些细线不断从左向右的牵引，这样能够提高阅读速度。
而sans-serif类型字体由于没有这些装饰线，整个字体显得干净、利落，很适合作为文章的标题文字使用。
除了上面两类常用的通用字体外，在罗马字符中还可以看到下面几种类型的字体，当然这些字体在网页设计中不是很常用，多用于传统印刷中。
cursive：模拟人笔迹的字体，一般这些字体大部分是由曲线和比衬线字体更强的笔画修饰组成。例如，Comic Sans。
fantasy：特殊字体，这些字体不能通过某种单一的特性来定义，而且也不能简单地归为其他系列的某一类。例如，Western、Klingon。
monospace：无比例的字体，通常用于模拟打印机打出的字体，这些字体中的每个字符都占有同样的宽度。例如，Courier。
当在网页中定义字体样式时，一般建议字体列表的最后一种字体选择通用字体，这主要是考虑到当浏览者的系统中没有指定字体时，浏览器可以搜索系统中同类字体来显示网页字体。
摘自《精通CSS网页布局》第3章
CSS中的通用字体的更多相关文章
- CSS中的五大字体家族（cursive 手写字体族更吸引我）
这是CSS中的五大字体家族. serifserif 中文翻译为“衬线字体族”.serif 具有末端加粗.扩张或尖细末端,或以实际的衬线结尾的一类字体.可以看出 serif 总是在文字末端做文章,这样做 ...
- CSS中常用的字体单位：px、em、rem和%的区别
在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...
- css中常见中文字体的英文名称
曾经看过一些文章,建议CSS中字体应用英文来替代,但一直未引起我重视.最近官网改版,今天同事测试发现Mac的Safari总是显示宋体 → → 修改font-family:"微软雅黑" ...
- Css中常用中文字体的Unicode编码对照
在网页制作中,最常用的恐怕是字体属性了,在调整页面兼容的时候,也常常发现字体名称的原因导致不兼容或乱码,下面给出几种常用字体的ucicode编码对照,方便使用. 宋体 SimSun \5B8B\4F5 ...
- css中如何设置字体
来自百度的回答: 建议使用font-family: "Microsoft YaHei";支持UTF-8和GB2312字符集. 不生效的3种情况:1.当此属性定义的是全局样式时,对于 ...
- CSS中常用中文字体转Unicode编码表
中文名 英文名 Unicode Unicode 2 Mac OS 华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1 华文细黑 华文黑体 STHeiti ...
- CSS中常见中文字体的英文名称(Microsoft YaHei,SimHei)
Mac OS的一些: 华文细黑:STHeiti Light [STXihei]华文黑体:STHeiti华文楷体:STKaiti华文宋体:STSong华文仿宋:STFangsong儷黑 Pro:LiHe ...
- 在CSS中通过@font-face属性来实现网页中嵌入特殊字体。
首先获取要使用字体的三种文件格式.EOT..TTF或.OTF..SVG,确保能在主流浏览器中都能正常显示该字体..EOT,适用于Internet Explorer 4.0+.TTF或.OTF,适用于F ...
- 中文字体在CSS中的表达方式
在写一个网站的样式表的时候,都会不可避免地用到一些中文字体,比如说微软雅黑.黑体等,除非是做英文站,或者说你乐意整站都用浏览器默认的字体,那我也算服了U.在 CSS 中写入中文字体的方法一般采用 fo ...
随机推荐
- 使用swagger 生成 Flask RESTful API
使用swagger 生成 Flask RESTful API http://www.voidcn.com/article/p-rcvzjvpf-e.html swagger官网 https://swa ...
- web：频繁刷新浏览器的页面【小工具】
[目的] 频繁刷新某一浏览器页面,小测试一下加载性能,或者打开的文件是否及时关闭,会不会导致服务器奔溃 [小工具] 新建txt,输入以下内容,并保存为html的格式,然后在浏览器中打开,则会定时刷新指 ...
- 1. orcle 创建可扩展表空间
1.创建表空间 a). create tablespace tablespacename datafile 'D:\tablespace\tablespacename.dbf' size 200m a ...
- 解析main函数的命令行参数
原创文章,转载请正确注明本文原始URL及作者. 介绍 写C/C++程序,我们常常需要把main函数的参数作为选项来传递.在linux中,解析选项有专门的函数可以用. int getopt(int ar ...
- 飞鸽传书linux进程退出不彻底
问题描述: 飞鸽传书linux版本(QIpmsg)是有问题的. 在ubuntu14.04上运行的时候,没有任务栏图标,点击关闭也不能退出进程,端口仍然占用,无法再次运行. 这个问题截至1.2.1412 ...
- beego注解路由 [自定义方法]
背景: beego生成的controller里面,默认get请求到由Get()方法处理:post请求由Post()方法处理 etc. 如果想自定义方法来处理请求,改怎么做? 直接拿beego的文档来说 ...
- iOS pods编译原理
首先看一下Podfile文件下面这行 use_frameworks! 这行的意思是Pod工程中的target是否编译成framework的形式,加上这行Pod工程中的target会编译成framewo ...
- ejs 用到的语法
1.ejs 服务端渲染模板 2.语法: 01. <%= 变量名 %> -原样输出,不解析标签 02. <% js代码 %> 03. <%- 变量名%> -解析标签 ...
- 高德地图 API 计算两个城市之间的距离
1. 目前在项目中,遇到一个需求不会做,就是要计算两个城市之间的距离,而这两个城市的输入是可变的,如果要使用数据库来先存储两地之间的距离,调用的时候再来调用,那么存数据的时候,要哭的,因为光是省级区域 ...
- js相关文章
1.js获取网页屏幕可见区域高度 2.JS组件系列——BootstrapTable 行内编辑解决方案:x-editable 3.Bootstrap table 服务器端分页示例