CSS 文字详解

第一部分:简介

前言:

现下大部分网页都是由 文字 和 图片 构成.
所以 文字 在 网页视觉方面 是基本的一大构成.
下面我们来介绍在CSS中 控制文字的一些 基本操作:

分析:
我们首先分析. 文字 这个东西到底是个什么?
说道 分析一个 事物的第一步就是分析 事物自带的属性
在显示器终端上, 文字 能显示出来,本质是 它 点阵了视窗的某一部分像素.
对计算机而言, 它们只是不同 点阵的像素而已
对我们人类而言. 是约定俗成的 视觉认知.

\color{red}{由此得出: 文字是一堆 像素的集合 }

像素集合的本质就决定了 它有 大小(font-size) 和 颜色(color) 的最基本的两个属性.
再加上 我们生活中常见的 文字修饰. 就有了 文字方向(writing-mode) 缩进(text-indent), 斜体(font-style),标识(text-decoration)等等.

如下列表:

格式 定义 值 用法
color 文字颜色. 颜色单词/ 十六进制 / rgba()等.... color: red / #ffeedd / rgba(100,20,150,.5) ...;
font-family 字体大小. 常用有: "Arial","Microsoft Yahei","黑体","宋体",sans-serif font-family: "Arial","Microsoft Yahei","黑体","宋体",sans-serif
font-size 字体系列. 数值+px / 百分比,smaller.larger(相对父元素) font-size: 30px / 150% / smaller;
font-weight 字体粗细. 100~900 / normal(400), blod(700) / bloder / lighter/ inherit font-weight: bold / 700;
font-style 字体的风格 normal / italic / oblique / inherit font-style: italic / oblique;
font 字体属性集合简写 顺序依次是: font-style font-variant font-weight font-size/line-height font-family font:italic bold 12px/20px arial,sans-serif;
text-shadow 文字阴影 h-shadow v-shadow blur color text-shadow: 4px 5px 6px rgba(,250,250,.6);
text-decoration 文本修饰 none(default) / underline / overline / line-through / inherit text-decoration: underline;
text-transform 文本大小写 none(default) / capitalize / uppercase / lowercase / inherit text-transform: uppercase;
text-indent 文本缩进 数值+em text-indent: 2em;
text-align 水平对齐方式 left(default) / right / center / justify / inherit text-align: center;
letter-spacing 字符间距 数值+px (允许使用负值) letter-spacing: 2px / -3px;
line-height 行高 数字 / 百分比 / 数值+px line-height: 1.5 / 150% / 20px;
word-wrap 换行 normal / break-word word-wrap: normal / break-word;
writing-mode 方向 horizontal-tb / vertical-rl / vertical-lr / sideways-rl / sideways-lr writing-mode: horizontal-tb;

另外还有常用的 文字省略:

  • 单行文字省略
white-space: no-wrap;
text-overflow: ellipsis;
overflow: hidden;
  • 多行文字省略 注意: 不要给文本父容器设置高度. 
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*多余的文字在第三行后省略掉 */
overflow: hidden;

第二部分: 实例展示与扩展

  • color

.box .span1 {
  color: red;
}
.box .span2 {
  color: #5566ee;
}
.box .span3 {
  color: rgba(100,200,150,.6);
}

效果

css-color.png

color拓展:

既然能给文字填充颜色. 那 可不可以 填充渐变颜色呢? 答案是: 可以的.
如下:

.box p {
  padding: 20px;
  width: 400px;
  border: 1px solid red;
  font-size: 50px;
  
  background-image: -webkit-linear-gradient(bottom left,red,yellow,green,cyan); /* 为文本元素提供渐变背景 */
/* background: linear-gradient(to bottom left,red,yellow,green,cyan); */
  -webkit-background-clip:text; /* 用文本剪辑背景，用渐变背景作为颜色填充文本。 */
  -webkit-text-fill-color:transparent;   /* 使用透明颜色填充文本。 */
   color:transparent;  /* 使用透明颜色填充文本。 */
}

效果

css文字渐变.png

再来,
既然能文字能填充颜色. 那能不能填充其他的东西呢? 比如 图片...
答案还是 可定的 .
如下

.box {
  border: 1px solid red;
  text-align: center;
  width: 400px;
  font-size: 150px;
  font-weight: 900;
  
  /* 核心代码 */
  background: url(http://thumbs.dreamstime.com/b/%E7%A7%8B%E5%A4%A9%EF%BC%8C%E4%B8%8E%E6%A0%91%E7%9A%84%E7%A7%8B%E5%A4%A9%E9%A3%8E%E6%99%AF-%E5%A4%AA%E9%98%B3%E5%8F%91%E5%85%89-46805832.jpg) center center no-repeat; /* 图片填充 */
  -webkit-background-clip: text;  /* 以文字为剪切蒙版 */
  -webkit-text-fill-color:transparent; /* 设置文字透明 */
  color: transparent; /* 设置文字透明 */
}

效果

css-图片填充文字.png

  • font-size

字体的大小 因为有继承性,所以可以从两个方面来设置它.

一 设置固定大小: number+px;
二 相对父容器的字体大小: 百分比 或 smaller, larger

如下

.father {
  font-size: 20px;
}
.son1 {
  font-size: 30px; /* 最常用 */
}
.son2 {
  font-size: 200%; /* 在不知道父元素字体大时,可以用 */
}
.son3 {
  font-size: smaller;
}

效果

css-font-size.png

font-size拓展

  • 拓展(一)
    计算机逻辑是非常严谨的, 就算我们看不到的空格它也会把她计算进来.
    这种情况就会出现一种情况: 想要两个元素紧挨在一起,结果却又一道缝隙在中间.
    这时候.font-size就是解决这个问题的方法之一.

如下图:

标签之间空格.png

实例:

.father {
  font-size: 0; /* 父容器字体大小设置为零 */
}
.father span {
  border: 1px solid red;
  font-size: 20px; /* 在子元素里恢复大小 */
}

效果

缝隙消失.png

  • 拓展(二)
    在浏览器中.特别是在chrome浏览器中.有默认最小字体大小的设置.一般为8px.
    意思就是 font-size: 6px, 也是显示8px的大小.
    问题来了: 怎么才能把文字小于8px显示在屏幕上呢?
    那就要 用到transform: scale(0.0<参数<1.0>);
    实例: 
.fatherBox .normal {
  font-size: 6px; /* 这里设置了6px, 实际效果大小是8px */
}

.fatherBox .scale {
  font-size: 6px;  /* 这里设置了6px, 实际效果大小是8px */
  transform: scale(0.8); 
  -webkit-transform: scale(0.8); /* 0.8是缩放比例  */
}

效果:

css-font-scale.png

  • font

font是 字体所有字体设置的一个简写.
可以按顺序设置如下属性：

font-style (可选)
font-variant (可选)
font-weight (可选)
font-size/line-height  /* 规定字体尺寸和行高 */
font-family

实例:

.fatherBox p {
  font: italic small-caps bold 30px/1.5 "宋体";
}

效果

css-font.png

这里需要注意的是: font-variant 这个属性 variant : 变种; 变体; 变形;

它的值只有: small-caps 显示小型大写字母的字体 (normal, inherit不算的话)
它可以理解成: 小型化的大写字母
例如:

<!-- HTML -->
  <div class="fatherBox">
    <p class="p1">CSS: font-varint</p>
    <p class="p2">CSS: normal</p>
  </div>

 /* CSS */
.fatherBox .p1 {
  font-variant: small-caps;
}

效果:

css-font-variant.png

  • text-shadow

基本用法:

text-shadow: h-shadow v-shadow blur color;
h-shadow：必需。水平阴影的位置。允许负值。
v-shadow：必需。垂直阴影的位置。允许负值。
blur:可选。模糊的距离。
color:可选。阴影的颜色。

text-shadow拓展
文字和图片一样, 可以产生阴影.
在平面设计中, 阴影有很多的妙用..
如果用好阴影, 不仅可以提高文字美感,还可以产生一些酷炫的效果. 如 闪烁,浮雕.3D立体字....

实例

.father .p1 {  /* 一般阴影 */
  text-shadow: 4px 5px 5px green; 
}
.father .p2 { /* 闪烁效果 */
  text-shadow: 0 0 .1em,
               0 0 .3em;
}
.father .p3 { /* 浮雕效果 */
  text-shadow: 2px 2px green,
              -2px -2px green,
               2px -2px green,
              -2px 2px green;
}
.father .p4 { /* 3D立体效果 */
  text-shadow: 0 1px hsl(0,0%,85%),
               0 2px hsl(0,0%,80%),
               0 3px hsl(0,0%,75%),
               0 4px hsl(0,0%,70%),
               0 5px hsl(0,0%,65%),
               0 5px 10px black;
}

[注] hsl() 是颜色的 一种 色彩表达模式.
HSL即[色相]、[饱和度]、[亮度]（英语：Hue, Saturation, Lightness）
具体详情点击:
https://baijiahao.baidu.com/s?id=1639770452743689307&wfr=spider&for=pc

效果

css阴影效果.png

  • text-decoration

在很多情况下,为了 突然, 标记, 注释 一些文本内容.
我们经常要给 这些文字 来修饰一下,以别其他文字.
那我们就要用到 text-decoration.

案例

.father .p1 {
  text-decoration: underline ; /* 下划线在文字下方 */
}
.father .p2 {
  text-decoration: overline;  /* 下划线在文字上方 */
}
.father .p3 {
  text-decoration: line-through;  /* 下划线穿过文字 */
}

效果:

css-text-decoration.png

text-decoration拓展
从上面例子可以做到. text-decoration确实起到了标识一些想要注意的文字.
但是问题又随之而来: 我要的下划线是要有 颜色的..
就想我们小时候读书用红笔把重点内容标出来一样,既美观又醒目.
同样, css设计者同样考虑到这个小细节...
实例:

.father .p1 {
  text-decoration: underline red; /* 颜色属性可选,默认跟字体设置的color颜色一样 */
}

效果

css-text-decoration.-red.png

还有一个 算半个 文字 修饰的 伪类: text::selection {}
网页通常默认选中的文字 底色为 蓝色,字体颜色为 白色
通过应用text::selection {}伪类 我们可以 修改 被选中 文字的 底色和字体颜色
实例:

.text::selection {
  background: green;
  color: red;
}

效果:

css-selection.png

  • letter-spacing

这个命名控制 元素内所有字符之间的空隙距离
在英文里, 因为有单词的存在,
所以还有一个 word-spacing 的命名.它只负责控制 单词与单词之间空隙.
word-spacing 对中文 不起作用的
所以,在中文调整字间距的时候,只有使用 letter-spacing.
(当然, 在元素里面使用&nbsp; 也是可以的,但是太土味了.)

实例:

.fatherBox .p1 { /* 我对所有字符之间间隔起作用 */
  letter-spacing: 5px;
}
.fatherBox .p2 { /* 我是对单词之间空隙间隔起作用 */
  word-spacing: 5px;
}

.fatherBox .p3 {/*  letter-spacing对中文起作用 */
  letter-spacing: 5px;
}
.fatherBox .p4 { /* word-spacing对中文不起作用 */
  word-spacing: 5px;
}

效果

css-letter-word-spacing.png

writing-mode

现代书本上的文字都是从左到右的顺序排列，但是古时候不同，文字都是从右至左排列的，现在在很多古籍、牌坊、石碑等上面依旧可以看到从右至左的文字。

css也可以调整文本排版方向，是通过什么属性控制的呢？
writing-mode 属性定义了文本在水平或垂直方向上如何排布。

writing-mode 值 描述 示意
horizontal-tb (正常书写) 水平方向自上而下的书写方式。即 left-right-top-bottom
111.png
vertical-rl 垂直方向自右而左的书写方式。即 top-bottom-right-left
222.png
vertical-lr 垂直方向内内容从上到下，水平方向从左到右
333.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 十·CSS常用样式
    1.块级元素和行内元素 块级(block-level)元素；行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,042评论 1赞 4
  • CSS要点记录
    CSS要点记录 CSS 指层叠样式表 (Cascading Style Sheets) 多种样式时的优先级问题 数...
    Tony__Hu阅读 1,182评论 0赞 0
  • 关于CSS
    学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,094评论 0赞 1
  • css规范
    1 前言CSS 作为网页样式的描述语言，一直有着广泛的应用。本文档的目标是使 CSS 代码风格保持一致，容易被理解...
    LikySis阅读 373评论 0赞 0
  • CSS
    1 字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) ...
    厝弧阅读 329评论 0赞 0