字体 | 陈若的博客

定义字体

// 定义字体
@font-face {
    font-family: "hahah" ;
    src: url("https://npm.elemecdn.com/@fortawesomsdas/xxxx/xxxx/xxx.ttf") format("字体格式");
}
// 使用字体
h1{
    font-family: "hahah";
}

字体格式

truetype - ttf
- Windows 和 Mac 最常见字体
- RAW 格式，不为任何网站优化
- IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2+
opentype - otf
- 原始字体格式，内置在 truetype 基础之上
- 提供更多功能
- Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile Safari4.2+
web-open-font-format - woff
- Web 字体最佳格式
- 是一个开放的 truetype、opentype 压缩版本
- 支持元数据包的分离
- IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+
embedded-opentype - eot
- IE 专用字体
- 可以从 truetype 创建此格式
- IE4+
svg - svg
- 基于 svg 渲染
- Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

color

定义：用来设置字体的颜色

font-size

定义：字体的大小

font-family

定义：用来设置字体类型，另外使用font属性也可以定义字体类型

对于英文或其他西文字体来说，CSS提供了五类通用字体。所谓通用字体就是一种备用机制，即指定的所有字体都不可用时，能够在用户系统中找到一个类似字体进行替代显示

serif:衬线字体
sans-serif:无衬线字体
cursive:草书，表现为斜字型、联笔或其他草体的特征
fantasy:奇异字体，主要是装饰性的，但保持了字符的呈现效果，换句话就是艺术字
monospace:等宽字体，唯一标准就是所有的字型宽度都是一样的

可以同时指定多个字体，多个字体间使用,隔开

字体生效时优先使用第一个，第一个无法使用则使用第二个，如法抛掷

font-weight

定义：用来设置字体的粗细

属性值

normal:默认值，不加粗，相当于取值为400
bold:加粗，相当于取值为700
100~900 九个级别

font-style

定义：用来设置字体的风格

属性值

normal:正常
italic:斜体

vertical-align

定义：用来设置元素垂直对齐的方式

属性值

baseline:默认值基线对齐
top:顶部对齐
bottom:底部对齐
middle:居中对齐

text-decoration

定义：用来设置文本修饰

属性值

none:默认,没有
blink:闪烁效果
underline:下划线
line-through:贯穿线或称为删除线
overline:上划线

text-transform

定义：用来转换字母大小写的

属性值

none:默认，定义带有小写字母和大写字母的标准文本
capitalize:文本中的每个单词以大写字母开头
lowercase:定义无大写字母，仅有小写字母
uppercase:定义无小写字母，仅有大写字母
inherit:规定应该从父元素继承text-transform属性的值

text-shadow

定义：用来阴影文本内容

属性值

// h-shadow:必需,水平阴影的位置。允许负值,数字形式,正值向右，负值向左
// v-shadow:必需,垂直阴影的位置。允许负值,数字形式,正值向下，负值向上
// blur:可选,模糊的距离,模糊程度
// color:可,阴影的颜色
// text-shadow: h-shadow v-shadow blur color;
text-shadow: 10px 10px 2px rgba(29, 99, 78, 0.8);

text-overflow

定义：用来指定当文本溢出包含它的元素时，应该如何显示

属性值

clip:剪切文本
elipsis:显示省略符号 … 来代表被修剪的文本
string:使用给定的字符串来代表被修剪的文本
initial:设置为属性默认值
inherit:从父元素继承该属性值

text-overflow 需要配合以下两个属性使用：

white-space: nowrap;
overflow: hidden;

text-align

定义：用来规定元素中的文本的水平对齐方式

属性值

left:把文本排列到左边。默认值
right:把文本排列到右边
center:把文本排列到中间
justify:实现两端对齐文本效果
inherit:规定应该从父元素继承 text-align 属性的值

text-indent

定义：用来规定文本块中首行文本的缩进

属性值

length:定义固定的缩进。默认值：0,带单位,推荐em
%:定义基于父元素宽度的百分比的缩进
inherit:规定应该从父元素继承 text-indent 属性的值

letter-spacing

定义：增加或减少字符间的空白（字符间距）

参数是：定义字符间的固定空间（允许使用负值）,默认为0

word-spacing

定义：增加或减少字与字之间或单词之间的空白

参数是：定义单词间的固定空间（允许使用负值）

writing-mode

定义：用来在文本在水平或垂直方向上进行排布

属性值

horizontal-tb：水平方向自上而下的书写方式。即左-右-上-下
vertical-rl：垂直方向自右而左的书写方式。即上-下-右-左
vertical-lr：垂直方向内内容从上到下，水平方向从左到右
sideways-rl：内容垂直方向从上到下排列
sideways-lr：内容垂直方向从下到上排列

white-space

定义：用来设置网页如何处理空白

属性值

normal:正常
nowrap:不换行
pre:保留空白

简写

定义：用来设置字体相关的所有属性

语法

1 2	font: 字体大小/行高字体族 <!-- 行高可以不写 -->

行高

定义：文字占有的实际高度

通过使用line-height来设置行高

推荐使用em

属性值

可以直接指定一个大小单位

可以直接指定设置一个整数，行高将会是字体的指定的倍数

行间距 = 行高 - 字体大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo{
            font-size:100px;
            color:#bfc;
            line-height:150px;
            text-decoration:underline red ;
        }
    </style>
</head>
<body>
    <div class="demo">wsy</div>
    
</body>
</html>