CSS笔记(五)字体
CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。
参考:http://www.w3school.com.cn/css/css_font.asp
- CSS字体系列
5种通用字体系列:
① Serif 字体
② Sans-serif 字体
③ Monospace 字体
④ Cursive 字体
⑤ Fantasy 字体
- 指定字体系类
p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
- 字体风格
常用于规定斜体文本。共三个值:normal,italic和oblique。
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
- 字体变形
可设置小型大写字母。
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
使用:
<p class="normal">This is a test</p>
<p class="small">This is a test</p>
效果:

- 字体加粗
设置文本的粗细。从100~900为字体指定了9级粗细。400对应normal,而700对应bold。
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:;}
使用:
<p class="normal">This is a test</p>
<p class="thick">This is a test</p>
<p class="thicker">This is a test</p>
效果:

- 字体大小
设置文本的字体大小。默认普通的默认大小为16像素(16px = 1em)。在IE中很可能要使用em设置字体大小。
h1 {font-size:60px;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
CSS 字体属性
| 属性 | 描述 |
|---|---|
| font | 简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
| font-family | 设置字体系列。 |
| font-size | 设置字体的尺寸。 |
| font-size-adjust | 当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。) |
| font-stretch | 对字体进行水平拉伸。(CSS2.1 已删除该属性。) |
| font-style | 设置字体风格。 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 设置字体的粗细。 |
CSS笔记(五)字体的更多相关文章
- CSS 笔记五(Combinators/Pseudo-classes/Pseudo-elements)
CSS Combinators Four different combinators in CSS3 descendant selector (space) child selector (>) ...
- CSS 笔记——文本字体
5. 文本字体 -> 文本 (1)text-indent 基本语法 text-indent : length 语法取值 length : 百分比数字 | 由浮点数字和单位标识符组成的长度值,允许 ...
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- 【CSS学习】--- 字体样式
一.前言 CSS字体属性可以定义文本的字体系列.大小.加粗.颜色.风格(如斜体)和变形(如小型大写字母). CSS的字体属性: font-family 设置字体系列 font-size 设置字体的尺寸 ...
- Typescript 学习笔记五:类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- CSS Fonts(字体)
CSS Fonts(字体) 一.serif和sans-serif字体之间的区别 注意: 在计算机屏幕上,sans-serif字体被认为是比serif字体容易阅读. 二.CSS字型 在CSS中,有两种类 ...
- CSS笔记--选择器
CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...
- C#可扩展编程之MEF学习笔记(五):MEF高级进阶
好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...
- web—第四章css&第五章
web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个cs ...
- css中的字体及文本相关属性
css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...
随机推荐
- 、web前端的这么知识应该是怎样的一个知识体系架构?
.web前端的这么知识应该是怎样的一个知识体系架构?之前我以为可以以W3C为纲要,把W3C的东西学会了就够了.后来发现我错了,W3C还不全面. 真正全面的覆盖了web前端知识体系的东西是——浏览器内核 ...
- python 提取图片转为16 24BPP 的方法
python 中处理图片用的是 pil ,在 linux 和 win 上都可以使用. centOS 5.x 上安装的方法是 yum install python-imaging 24BPP: imp ...
- 理解Linux中断 (1)【转】
转自:http://blog.csdn.net/tommy_wxie/article/details/7425685 版权声明:本文为博主原创文章,未经博主允许不得转载. 一直认为,理解中断是理解内核 ...
- while DEMO
while DEMO #!/bin/bash #author:xiluhua #since: let v_count= " ] do ] then sleep echo $v_count l ...
- PHP无限级分类-递归(不推荐)
[http://www.helloweba.com/view-blog-204.html] 在一些复杂的系统中,要求对信息栏目进行无限级的分类,以增强系统的灵活性.那么PHP是如何实现无限级分类的呢? ...
- HDU 4635:Strongly connected(强连通)
http://acm.hdu.edu.cn/showproblem.php?pid=4635 题意:给出n个点和m条边,问最多能添加几条边使得图不是一个强连通图.如果一开始强连通就-1.思路:把图分成 ...
- jquery 实现页面局部刷新ajax做法
这个方法就多了去了,常见的有以下几种:下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲 ...
- git: fatal unable to auto-detect email address
参考:http://stackoverflow.com/questions/25671785/git-fatal-unable-to-auto-detect-email-address 正确使用命令: ...
- Thinkphp3.2.3如何加载自定义函数库
方法一:将自定义函数库放在Common文件夹下的Common文件夹下,命名为function.php. 方法二:项目配置文件中定义LOAD_EXT_FILE参数.这个方法在3.1的开发手册中有. 参考 ...
- ceil floor函数
> a=6.4> b=math.ceil(a)> print(b)7> c=math.floor(a)> print(c)6 ceil向上取整 floor向下取整