七. CSS字体
概述
所谓字体:即文字的形体结构,根据外观字体分不同的类别:衬线字体Serif、无衬线字体sans-serif和等宽字体monospace。每一个类别的字体又可以分成不同的字体族font family,而字体族又可以包含不同的字型font face。CSS的字体属性描述了一类字体的大小和外观。比如使用上面字体族,多大字号,粗体还是斜体等。
文本与字体的区别
文本就是一组字符,比如一个段落、一个标题,文本有行高、字符间、有没有下划线和缩进等
字体是用于描述一类文本的大小和外观,比如用什么字体族、多大字号、是否斜体
总的来说,Web页面中的字体有三个来源
①用户机器中已安装的字体
②保持在第三方网站中的字体,例如,Typekit和Google
③保持在自己Web服务器上面的字体
与字体有关样式的属性有:字体族(font-family)、字体大小(font-size)、字体样式(font-style)、字体粗细(font-weight)、字体变化(font-variant)、font(简写属性)
字体族(font-family)
用于设置文本使用什么字体,一般来说整个页面应该有一个主字体族,font-family是可用继承的属性,由于Web页面中的字体,要么来着用户本地电脑,要么来自服务器上,所以可能存在设定的某种字体无法使用的问题,要解决这个问题,需要在设定字体时,设置多种候选字体,组成字体栈。而且总是在最后声明一种通用字体。例如:
body{font-family: "trebuchet ms",tahoma,sans-serif} /*字体名之间有空格,所以用引号括起*/
这个字体栈要求:文档选用trebuchet ms字体族显示,如果机器里没有trebuchet ms字体,则选用tahoma字体
如果tahoma也找不到,则随便找一个sans-serif字体即无衬线字体,这是一种通用方法,以上由首选字体、备用字体、通用字体构造一个字体栈
常用的通用字体
使用如下通用字体,可以确保在最坏的情况下,文档也能得到正确的显示。
serif(衬线字体):字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同
sans-serif(无衬线字体):没有衬线字体的额外装饰,而且笔画的粗细差不多
monospace(等宽字体):指字符宽度相同的字体
cursive(草书/手写体):手写风格
fantasy:不能归入其他分类的字体
字体大小(font-size)
各个浏览器在默认情况下,已经为页面中的每个HTML元素设定了font-size,因为当显式设定font-size的时,实际上是在修改其默认值,font-size属性是可以继承的
设定字体大小有两种单位:绝对单位和相对单位
相对单位:百分比%、em、rem
相对字体大小事相对于最近被设置过字体大小的祖先元素来确定的。
使用相对字体大小,可以自动调整各层元素大小。这对于创建响应式页面非常重要。
绝对单位:像素px、派卡pica、英寸
使用绝对单位设置字体大小很简单,设置多大就是多大,不受祖先元素的影响,缺点是调整整个页面字体大小时,需要手动一个一个修改字体尺寸
理解几个默认字体大小以及它们的转换
标签名 | 默认大小em | |
h1 | 2em | 32px |
h2 | 1.5em | |
p | 1em | 1em=16px |
首先要理解的是浏览器的样式表给所有元素设定的默认样式是使用的相对单位em,font-size的基准大小是1em即16px
字体样式(font-style)
font-style用于设定字体是斜体还是正体,也就是说font-style的作用只是通过italic设置成斜体或者normal设置成正体
<p>This is a demo <span>Hello CSS!!</span> with font-size</p>
p{font-style: italic;}
span{font-style: normal;}
显示效果:
关于nomal值
很多属性都有nomal值,它的作用是取消所有的特殊样式,让元素恢复到初始的默认值,即让属性值恢复正常
字体粗细(font-weight)
用于设置字体的粗细,对于各个浏览器实现方式不同,实际上对于浏览器来说,它只显示bold和normal两个值
字体变化(font-variant)
font-variant只有一个值即small-caps,它会使所有的小写字母变成对应的大写字母
简写规则
先看下面的样式:
p{font:bold italic small-caps .9em helvetica,arial,sans-serif;}
上面的样式 设置p段落的粗细、斜体、小型字母大写、大小和字体族
必须遵循相应的简写规则,浏览器才能正确的解析
规则一:必须声明font-size和font-family
规则二:其他必须按照如下顺序出现
1.font-weight、font-style、font-variant顺序不分先后
2.font-size
3.font-family
七. CSS字体的更多相关文章
- CSS字体属性大全
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...
- css字体样式(Font Style),属性
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
- Css字体中英文对照表
css字体中文.英文.Unicode名对照表 另外注意:繁体中文字体名,在简体中文系统中是不能被识别的. 中文名 英文名 Unicode Unicode 2 Mac OS 华文细黑 STHeiti L ...
- css字体设置
css字体设置 .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,S ...
- 2.css字体单位
这期简单说说css字体单位 字体单位有三种:px.em.rem 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px. % 百分比 in 英寸 cm 厘米 mm 毫米 e ...
- Css - 字体图标
Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...
- CSS 字体(font)实例
CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...
- css字体中英文对照表(转)
在css文件中,我们常看到有些字体名称变成了乱码,这是由于网页开发者将中文字体的名字直接写成了中文,而css文件本身没有声明字符编码方式,查看时就出现了乱码.为了避免这种乱码状况出现,可以将css文 ...
- css 字体样式设置
css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style) ...
随机推荐
- POJ3928、LA4329【树状数组】
借此题试验一下各种做法的效果~ 这题为ACM2008北京站某题,介于简单与中等之间,做出来,罚时不多基本可以铜了,所以这样的题还必须得会,进阶之路. add(a[i]+1,1)这样处理之后,再用sum ...
- APK扩展文件及使用
转自:http://blog.csdn.net/myarrow/article/details/7760579 一.APK扩展文件基本知识 Android Market (Google Play St ...
- Eclipse设置选中高亮显示(包含debug)
如果不高亮显示了:工具栏里有个黄色小笔的图标,点一下就可以了,或者alt+shift+O 设置高亮显示:
- jquery Mobile点击显示加载等待效果
点击某个按钮或链接时,触发等待加载效果: <script> <!-- $(document).bind("mobileinit", function(){ }); ...
- phpexcel来做表格导出(多个工作sheet)
1.先得去下载phpexcel文档,加压下来 <?php /** * 简单实用Execl */ set_include_path('.'.get_include_path().PATH_SEPA ...
- 【React Native 实战】二维码扫描
1.前言今天介绍React Native来实现二维码扫描的功能.首先我们要借助第三方插件react-native-barcode-scanner-universal来实现跨平台二维码扫描. 2.介绍 ...
- swift app中展示折线图, 饼状图, 柱状图等数据图表
github 下载Charts-master SDK,该SDK有多种可自定义的图表样式 lineChart 正弦余弦线图 LineChart (cubic lines) LineChart (grad ...
- innodb 变量
http://dev.mysql.com/doc/refman/5.7/en/innodb-parameters.html
- C++检测一个文件是否存在
ifstream::is_open - C++ Reference http://www.cplusplus.com/reference/fstream/ifstream/is_open/ // if ...
- 解析Qt中QThread使用方法
本文讲述的是在Qt中QThread使用方法,QThread似乎是很难的一个东西,特别是信号和槽,有非常多的人(尽管使用者本人往往不知道)在用不恰当(甚至错误)的方式在使用QThread,随便用goog ...