为网页指定字体
- 先看如下代码
h2 {
font-family: "Courier New", Courier, monospace;
}
- 我们可以得到如下结论
使用自定义字体
-
网页使用的字体很好看, 但是用户电脑上没有, 怎么办?
-
可以使用自定义字体, 步骤如下
- 复制字体文件到文件夹
- 在 CSS 代码中引入该字体
- 为元素指定该字体
复制字体文件到文件夹
在 CSS 代码中引入该字体
@font-face {
font-family: "h1-font";
src: url("font/喜鹊招牌体.TTF") format("TrueType");
}
为元素指定该字体
h1 {
font-family: "h1-font";
}
注意事项
不建议使用自定义字体
- 字体文件一般比较大, 只有加载完了, 才能显示效果, 太占带宽
- 有些字体是由版权的, 如果在网页上显示, 可能会侵权
设置字体粗细
- 代码如下
p {
/* 正常 */
font-weight: normal;
}
p {
/* 加粗 */
font-weight: bold;
}
font-weight也叫字重
设置字体大小
- 可以使用数字+px 的方式, 指定具体的字体大小
p {
font-size: 1px;
}
- 处理使用数字像素, 也可以使用百分比, 表示相对
div {
font-size: 50px;
}
p {
font-size: 100%;
}
- 相对于父级的字体大小
- 也可以使用 em,
1em = 100%
设置字体颜色
- 可以通过单词的方式, 设置字体颜色, 不过不推荐, 因为表示颜色的单词毕竟有限
- 也可以使用 rgb 来表示
- 数字的范围是
0~255
rgb(255, 255, 255) ==> 白色
rgb(0, 0, 0) ==> 黑色
rgb(255, 0, 0) ==> 红色
rgb(0, 255, 0) ==> 绿色
rgb(0, 0, 255) ==> 蓝色
- rgba 支持透明度,
0~1
rgba(red, green, blue, 透明度)
- 也可以使用 16 进制来表示, 可以缩写
#ddd = #dddddd
#abc = #aabbcc
#662 = #666622
-
16 进制的范围
#000000 ~ #ffffff -
颜色一般不手写, 都是用吸管工具吸
设置字体行高
- 使用
line-height, 可以设置字体的行高 - 单位可以是像素
px, 也可以是倍数em, 一般是倍数
- 如果是固定像素, 字体一旦变大, 会看着很不舒服
设置字体倾斜
- 可以使用
font-style, 来设置字体是否倾斜
p {
font-style: oblique;
}
italic和oblique效果一样, 推荐后者
设置字体大小写转换
- 所有字母转大写
p {
text-transform: uppercase;
}
- 所有字母转小写
p {
text-transform: lowercase;
}
- 单词首字母大写
p {
text-transform: capitalize;
}
- 注意,
空格, 逗号, 破折号, 点号, &符号隔开会被当成新的单词
设置字体的下划线, 上划线, 删除线
- 设置上划线
p {
text-decoration: overline;
}
- 设置下划线
p {
text-decoration: underline;
}
- 设置中划线(删除线)
p {
text-decoration: line-through;
}
- 常用的是
去除超链接的下划线, 因为现在超链接很多, 满屏幕的下划线, 影响美观
a {
text-decoration: none;
}
设置文本阴影
- 语法如下
text-shadow: 颜色, 水平偏移像素, 垂直偏移像素, 模糊度像素;
p {
text-shadow: #000 2px 2px 2px;
}
文字中的空白处理
- HTML 代码中, 无论多少个空白符, 都会变成一个空格
- 可以通过 css 设置, 保留空白符
p {
white-space: pre;
}
处理 div 中的文本溢出
- 在 div 中的文字如果过多, 可能会溢出...
-
通常我们希望, 超出的部分截断, 并且后面加上
... -
需要加上如下三个属性
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 文本超出变成... */
white-space: nowrap; /* 文字不换行 */
设置文本缩进和对齐
- 通常我们需要首行有两个汉字的缩进
p {
font-size: 24px;
text-indent: 2em;
}
- 建议使用
em, 这样无论字体多大, 都是两个字的缩进
设置文本对齐
水平对齐
- 左对齐(默认)
text-align: left;
- 右对齐
text-align: right;
- 居中对齐
text-align: center;
设置字符间距
letter-spacing字母间距word-spacing单词间距- 没空格, 算字母, 有空格, 算单词, 无论中文还是英文
