《图解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)

目录
相关文章
|
6天前
|
前端开发
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
|
7天前
|
前端开发
particlesJS使用简介,CSS字体样式值
particlesJS使用简介,CSS字体样式值
|
7天前
|
前端开发
css字体实现渐变
css字体实现渐变
11 1
|
7天前
|
前端开发
css文本垂直展示------
css文本垂直展示------
10 1
css文本垂直展示------
|
8天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
|
8天前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
8天前
|
前端开发
css_字体混合正片叠底与发光
css_字体混合正片叠底与发光
15 0
css_字体混合正片叠底与发光
|
8天前
|
前端开发 开发者 流计算
css字体
【4月更文挑战第23天】css字体
15 3
|
8天前
|
前端开发
css 字体渐变样式(设置字体渐变样式+附加实现源码)
css 字体渐变样式(设置字体渐变样式+附加实现源码)
23 0
|
8天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
12 0