《CSS学习之路》004-CSS文本操作

561 阅读4分钟

为网页指定字体

  • 先看如下代码
h2 {
    font-family: "Courier New", Courier, monospace;
}
  • 我们可以得到如下结论

1586066509331

1586066551723

1586066689978

使用自定义字体

  • 网页使用的字体很好看, 但是用户电脑上没有, 怎么办?

  • 可以使用自定义字体, 步骤如下

  1. 复制字体文件到文件夹
  2. 在 CSS 代码中引入该字体
  3. 为元素指定该字体

复制字体文件到文件夹

1585993381909

在 CSS 代码中引入该字体

@font-face {
    font-family: "h1-font";
    src: url("font/喜鹊招牌体.TTF") format("TrueType");
}

为元素指定该字体

h1 {
    font-family: "h1-font";
}

1585993381909

注意事项

1586068851722

1586068921870

1586068960892

1586068780700

不建议使用自定义字体

  • 字体文件一般比较大, 只有加载完了, 才能显示效果, 太占带宽
  • 有些字体是由版权的, 如果在网页上显示, 可能会侵权

设置字体粗细

  • 代码如下
p {
    /* 正常 */
    font-weight: normal;
}
p {
    /* 加粗 */
    font-weight: bold;
}
  • font-weight也叫字重

1585993381909

设置字体大小

  • 可以使用数字+px 的方式, 指定具体的字体大小
p {
    font-size: 1px;
}

1585993381909

  • 处理使用数字像素, 也可以使用百分比, 表示相对
div {
    font-size: 50px;
}

p {
    font-size: 100%;
}
  • 相对于父级的字体大小

1585993381909

  • 也可以使用 em, 1em = 100%

1585993381909

设置字体颜色

  • 可以通过单词的方式, 设置字体颜色, 不过不推荐, 因为表示颜色的单词毕竟有限

1585993381909

  • 也可以使用 rgb 来表示
  • 数字的范围是0~255

1585993381909

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, 透明度)

1585993381909

  • 也可以使用 16 进制来表示, 可以缩写
#ddd = #dddddd

#abc = #aabbcc

#662 = #666622

1585993381909

  • 16 进制的范围#000000 ~ #ffffff

  • 颜色一般不手写, 都是用吸管工具吸

1585993381909

设置字体行高

  • 使用line-height, 可以设置字体的行高
  • 单位可以是像素px, 也可以是倍数em, 一般是倍数

1585993381909

  • 如果是固定像素, 字体一旦变大, 会看着很不舒服

1585993381909

设置字体倾斜

  • 可以使用font-style, 来设置字体是否倾斜
p {
    font-style: oblique;
}
  • italicoblique 效果一样, 推荐后者

1585993381909

设置字体大小写转换

  • 所有字母转大写
p {
    text-transform: uppercase;
}
  • 所有字母转小写
p {
    text-transform: lowercase;
}

1585993381909

  • 单词首字母大写
p {
    text-transform: capitalize;
}
  • 注意, 空格, 逗号, 破折号, 点号, &符号隔开会被当成新的单词

1585993381909

设置字体的下划线, 上划线, 删除线

  • 设置上划线
p {
    text-decoration: overline;
}
  • 设置下划线
p {
    text-decoration: underline;
}
  • 设置中划线(删除线)
p {
    text-decoration: line-through;
}

1585993381909

  • 常用的是去除超链接的下划线, 因为现在超链接很多, 满屏幕的下划线, 影响美观

1586071588784

1586071603991

a {
    text-decoration: none;
}

1585993381909

设置文本阴影

  • 语法如下
text-shadow: 颜色, 水平偏移像素, 垂直偏移像素, 模糊度像素;
p {
    text-shadow: #000 2px 2px 2px;
}

1585993381909

文字中的空白处理

  • HTML 代码中, 无论多少个空白符, 都会变成一个空格

1585993381909

  • 可以通过 css 设置, 保留空白符
p {
    white-space: pre;
}

1585993381909

处理 div 中的文本溢出

  • 在 div 中的文字如果过多, 可能会溢出...

1585993381909

  • 通常我们希望, 超出的部分截断, 并且后面加上...

  • 需要加上如下三个属性

overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 文本超出变成... */
white-space: nowrap; /* 文字不换行 */

1585993381909

设置文本缩进和对齐

  • 通常我们需要首行有两个汉字的缩进
p {
    font-size: 24px;
    text-indent: 2em;
}
  • 建议使用em, 这样无论字体多大, 都是两个字的缩进

1585993381909

设置文本对齐

水平对齐

  • 左对齐(默认)
text-align: left;
  • 右对齐
text-align: right;
  • 居中对齐
text-align: center;

1585993381909

设置字符间距

  • letter-spacing 字母间距
  • word-spacing 单词间距
  • 没空格, 算字母, 有空格, 算单词, 无论中文还是英文

1585993381909

快速跳转