《图解CSS》字体与文本

简介: * 字体是“文字的不同体式”或者“字的形体结构”,例如宋体/黑体/行楷等。* 文本就是一组字或字符,比如章标题、段落正文等等,跟使用什么字体无关。* CSS 为字体和文本分别定义了属性。字体属性主要描述一类字体的大小和外观。比如,使用什么字体族(是 Times,还是 Helvitica),多大字号,粗体还是斜体。文本属性描述对文本的处理方式。比如,行高或者字符间距多大,有没有下划线和缩进。

#### 字体与文本

* 字体是“文字的不同体式”或者“字的形体结构”,例如宋体/黑体/行楷等。

* 文本就是一组字或字符,比如章标题、段落正文等等,跟使用什么字体无关。

* CSS 为字体和文本分别定义了属性。字体属性主要描述一类字体的大小和外观。比如,使用什么字体族(是 Times,还是 Helvitica),多大字号,粗体还是斜体。文本属性描述对文本的处理方式。比如,行高或者字符间距多大,有没有下划线和缩进。

![](https://upload-images.jianshu.io/upload_images/2789632-e180460a6ddd56ed.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## 字体

网页中的字体有三个来源:

* 用户机器中安装的字体

* 保存在第三方网站上的字体。最常见的是 Typekit 和 Google,可以使用 link 标签把它们链接到你的页面上

* 保存在你的 Web 服务器上的字体。这些字体可以使用@font-face 规则随网页一起发送给浏览器

#### 字体的属性

* font-family

* font-size

* font-style

* font-weight

* font-variant

* font(简写属性)

#### 字体族

font-family:用于设定元素中的文本使用什么字体

注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。

#### 字体大小

font-size: 用于设置字体的大小

###### 绝对字体大小

使用像素(px),派卡(pica)或者英寸。

设定绝对字体大小时,也可以使用关键字值,比如 x-small、medium、x-large,等等。

###### 相对字体大小

使用百分比、em 或 rem(根元素的字体大小)设定字体大小。如果你给某个元素设定了相对字体大小,则该元素的字体大小要相对于最近的“被设定过字

体大小的”祖先元素来确定

#### 字体的样式

值:italic、oblique、normal。

示例:h2 {font-style:italic;}

#### 字体的粗细

可能的值:100、200……900,或者 lighter、normal、bold 和 bolder。

示例:a {font-weight:bold;}

#### 字体的变化

值:small-caps、normal。

示例:blockquote {font-variant:small-caps;}。

这个值会导致所有小写英文字母变成大写字母。

#### 简写字体属性

规则一:必须声明 font-size 和 font-family 的值。

规则二:所有值必须按如下顺序声明。  

1. font-weight、font-style、font-variant 不分先后;

2. 然后是 font-size;

3. 最后是 font-family。

示例

p {font: bold italic small-caps .9em helvetica, arial, sans-serif;}

###### 示例

![](https://upload-images.jianshu.io/upload_images/2789632-eb3fe98d056c337f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## 文本

#### 文本属性

###### text-indent(文本缩进)

值:长度值(正、负均可)。

示例:p {text-indent:3em;}。

###### letter-spacing(字符间距)

值:任何长度值(正、负值均可)。

示例:p {letter-spacing:.2em;}。

###### word-spacing(单词间距)

值:任何长度值(正、负值均可)。

示例:p {word-spacing:.2em;}。

###### text-decoration(文本装饰)

值:underline、overline、line-through、blink、none。

示例:.retailprice {text-decoration:line-through;}。

###### text-align(文本对齐)

值:left、right、center、justify。

示例:p {text-align:right;}。

###### line-height(行高)

值:任何数字值(不用指定单位)。

示例:p {line-height:1.5;}

###### text-transform(文本转换)

值:none、uppercase、lowercase、capitalize。

示例:p {text-transform:capitalize;}。

###### vertical-align(垂直对齐)

值:任意长度值以及 sub、super、top、middle、bottom 等。

示例:span {vertical-align:60%;}。

###### 示例

![](https://upload-images.jianshu.io/upload_images/2789632-4284bef06692f77c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

目录
相关文章
|
1月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
42 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
1月前
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
27 4
|
2月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
68 28
|
3月前
|
前端开发
使用CSS样式化占位文本
使用CSS样式化占位文本
23 0
|
3月前
|
前端开发 Ubuntu Linux
CSS 系统字体堆栈参考
CSS 系统字体堆栈参考
35 0
|
3月前
|
缓存 前端开发 Linux
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
102 0
|
4月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
3月前
|
前端开发 容器
CSS实现多行文本的展开收起
CSS实现多行文本的展开收起
42 0
|
4月前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
82 0