下面的用一个表格总结了文本样式中字体的一些设置方法:

属性名 说明 CSS 版本
font-size 设置字体的大小 1
font-variant 设置英文字体是否转换为小型大写 1
font-style 设置字体是否倾斜 1
font-weight 设置字体是否加粗 1
font-family 设置 font 字体 1
font 设置字体样式复合写法 1 ~ 2
@font-face 设置 Web 字体 3

  表格里面的属性名都有一个特点,那就是都以font开头,说明这些属性都是针对与字体,下面来逐一介绍如何使用。


1.font-size

p {
font-size: 50px;
}

  解释:这个属性是用来专门设置字体的大小的,除了可以使用自定义的大小之外,还有一些预设的值,有以下表格的值可供参考使用。

说明
xx-small 设置字体大小。每个值从小到大的固定值。
而具体的数值其实是由浏览器来定义,可能出现浏览器间的差异,所以用的比较少。
x-small
small
medium
large
x-large
xx-large
smaller 设置字体相对于父元素字体的大小
larger
数字+px

使用 CSS 像素长度设置字体大小

这里并不限定只能用px,其他度量单位也可以使用

数字+% 使用相对于父元素字体的百分比大小

  这里要对smaller和larger进行一下说明,首先,这两个值要生效,要先对其父元素进行字体的大小设置之后,在用父元素作为参照,得出相对的大小。

//先设置父元素字体大小
body {
font-size: 50px;
}
//再设置相对小一些
p {
font-size: smaller;
}

  而具体相对小多少,这些也是由浏览器定义的。


2.font-variant

  表格里说的很清楚,这个属性只对英文字母有效,有下面的值可供使用。

说明
normal 表示如果以小型大写状态,让它恢复小写状态
small-caps 让小写字母以小型大写字母显示

  这里先说small-caps,其实就是将所有的小写字母转换为大写,所谓的小型大写,也就是大写以后并不会改变字体的大小,不影响原来就有的大小字母。具体效果如下:

<span>Scolia</span>

  未进行设置时:

  设置后:

span {
font-variant: small-caps;
}

  看到这里,我想你应该知道什么叫小型大写字母了。

  继续讲normal这个值,这个值的应用场景是在于父元素已经先设置了small-caps这个值了,但是其子元素我不希望用small-caps这个值的效果显示,此时就可以用normal恢复默认的效果了。

//先让父元素设置小型大写
body {
font-variant: small-caps;
} //让子元素设置恢复小写
span {
font-variant: normal;
}

3.font-style

  这个属性是设置字体是否倾斜,有下面的值可供选择。

说明
normal 表示让倾斜状态恢复到正常状态
italic 表示使用斜体
oblique 表示让文字倾斜。区别在没有斜体时使用
p {
font-style: italic;
}

  解释:normal和上面一样,就不再说明了。这里说下oblique,这个值一般在字体文件没有斜体时使用,一般用户安装的中文字体都是含有斜体的,可能会在其他国家文字上使用,不过使用的不多。


4.font-weight

  设置字体是否加粗或变细,有下面的值可以选择:

说明
normal 表示让加粗的字体恢复正常
bold 表示让加粗的字体恢复正常
bolder 更粗的字体
lighter 轻细的字体
100 ~ 900 之间的数字 600 及之后是加粗,之前不加粗

  

p {
font-weight: bold;
}

  解释:使用lighter,会让字体比普通效果更细,但是bold和bolder的效果是一样的,浏览器体现不出其中的差别。


5.font-family

  设定使用的字体的名称,当然这个字体要用户已经安装了的,不然没效。

p {
font-family: 微软雅黑; /*只声明一个字体,如用户没安装,则无效*/
} p {
font-family: 楷体,微软雅黑,宋体; /*使用备用字体,会依次查找,找的哪个用哪个*/
}

6.font

  可以用一个属性,对上面的所有效果进行设置,其有效的值是一样的。

p {
font: 50px 楷体;
}

  解释:其格式是这样的:[是否倾斜|是否加粗|是否转小型大写] 字体大小 字体名称;[]代表可选,|代表用来分隔选项,并不是要将|写进去。


7.@font-face

  为了防止自己使用的字体而客户端没有安装,造成现实效果与设计的不同的情况,可以在服务器提供相应的字体。

@font-face {
font-family: abc; /*为提供的字体起个别名方便引用*/
src: url('BrushScriptStd.otf'); /*字体文件的在服务器的路径*/
} p {
font-size: 50px;
font-family: abc; /*引用时使用别名*/
}

  其实css中的字体属性和文本样式属性还是很容易高混的,因为它们的都针对与文字,下面我总结一些字体属性到底可是设置什么:

  1.字体大小,特有

  2.怪异的大小写,文本样式中也有关于大小写的设置,但对字体设置大小写会出现小型大写字母这种特殊效果

  3.文字加粗,特有

  4.文字倾斜,特有

  5.字体控制,特有

  其实总结起来,字体属性和文本样式属性真正作用有所重叠的地方就只有大小写这里,但因为字体等级的大小写的行为很怪异,不符合我们常规期待,所以还算好区分。

  而感觉作用的效果来看,文字属性主要是设置一些很基本的东西,而文本样式属性这用于各种效果级的展示。

5.css字体的更多相关文章

  1. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  2. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  3. Css字体中英文对照表

    css字体中文.英文.Unicode名对照表 另外注意:繁体中文字体名,在简体中文系统中是不能被识别的. 中文名 英文名 Unicode Unicode 2 Mac OS 华文细黑 STHeiti L ...

  4. css字体设置

    css字体设置 .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,S ...

  5. 2.css字体单位

    这期简单说说css字体单位 字体单位有三种:px.em.rem 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px. % 百分比 in 英寸 cm 厘米 mm 毫米 e ...

  6. Css - 字体图标

    Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...

  7. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

  8. css字体中英文对照表(转)

     在css文件中,我们常看到有些字体名称变成了乱码,这是由于网页开发者将中文字体的名字直接写成了中文,而css文件本身没有声明字符编码方式,查看时就出现了乱码.为了避免这种乱码状况出现,可以将css文 ...

  9. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

  10. css字体图标的制作和使用。

    css字体图标的制作和使用. 在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图 ...

随机推荐

  1. OC基础(26)

    集合对象的内存管理 Copy copy与内存管理 @property中的copy关键字 自定义的类实现copy操作 *:first-child { margin-top: 0 !important; ...

  2. jdk线程常见面试题

    请编写一个多线程程序,实现两个线程,其中一个线程完成对某个对象int成员变量的增加操作,即每次加1,另一个线程完成对该对象成员变量的减操作,即每次减1,同时要保证该变量的值不会小于0,不会大于1,该变 ...

  3. mysql命令整理0919 不定期更新中

    1)新建数据库 create database +database_name:         查询数据库  show databases;       切换数据库   use database_na ...

  4. jmeter随笔(23)--在csv中维护变量参数

    点击标题下「蓝色微信名」可快速关注 坚持的是分享,搬运的是知识,图的是大家的进步,没有收费的培训,没有虚度的吹水,喜欢就关注.转发(免费帮助更多伙伴)等来交流,想了解的知识请留言,给你带来更多价值,是 ...

  5. socket 和 SocketServer 模块

    一 .Socket 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket socket(TCP,IP)通常也称作"套接字",用于描述IP地址和端 ...

  6. xml 和 json 的区别

    JSON(Javascript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于Javascript Programming Langu ...

  7. java基础回顾(五)——Stack、Heap

    栈(stack):是简单的数据结构,但在计算机中使用广泛.栈最显著的特征是:LIFO(Last In, First Out,后进先出).比如我们往箱子里面放衣服,先放入的在最下方,只有拿出后来放入的才 ...

  8. 《Linux企业应用案例精解》一书配套视频发布

    <Linux企业应用案例精解>一书配套视频发布(每周更新视频教程),通过读者平台账号,可以在平台下载AVI格式.所有读者都能获得本书中涉及的软件资料,轻松搭建你的学习环境. 当当购书地址: ...

  9. spm3安装和使用

    readme : 因为我在在spm3中主要用到的是spm build这个命令,因此本文简单的介绍一下如何安装spm3和使用其中的spm build命令 一.安装 1.安装nodejs 直接去官网下载n ...

  10. 常用的几种 SQLServer 分页查询方式实现

    SQLServer 的数据分页: 假设现在有这样的一张表:CREATE TABLE test( id int primary key not null identity, names varchar( ...