第8章 文本处理能力

9/23/2018 前端基础CSSCSS教程

# 第8章 文本处理能力

# line-height的另一个朋友font-size

vertical-align百分比值属性是相对于line-height计算,line-height的数值属性和百分比值都是相对于font-size计算。

# font-sizevertical-align的隐秘故事

<p data-height="265" data-theme-id="0" data-slug-hash="jpzveQ" data-default-tab="css,result" data-user="whjin" data-pen-title="图标垂直居中" class="codepen">See the Pen <a href="https://codepen.io/whjin/pen/jpzveQ/">图标垂直居中</a> by whjin (<a href="https://codepen.io/whjin">@whjin</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

原理:内联元素默认基线对齐,图片的基线是图片的下边缘,文字内容的基线是字符x下边缘。图片下边缘和文字字形边缘往上位置对齐。通过vertical-align:25%声明让图片的下边缘和中文汉字的中心线对齐。

# 理解font-sizeexemrem的关系

总结:1em的计算值等同当前元素所在的font-size计算值。

# 理解font-size的关键字属性值

  1. 相对尺寸关键字。largersmaller
  2. 绝对尺寸关键字。xx-largex-largelargemediumsmallx-smallxx-small
  • 容器设置font-size:medium,此时这个局部展示区域的字号跟随浏览器的设置,默认计算值是16px
  • 容器内的文字字号全部使用相对单位,如百分比值或em,然后基于16px进行转换。

# font-size:0与文本的隐藏

隐藏logo对应元素内的文字,除了text-indent缩进隐藏外,还可以使用以下方法:

.logo {
    font-size: 0;
}

# 字体属性家族font-family

font-family支持两类属性值,一类是字体名,一类是字体族

字体族

  • serif:衬线字体
  • sans-serif:无衬线字体
  • monospace:等宽字体
  • cursive:手写字体
  • fantasy:奇幻字体
  • system-ui1:系统UI字体

# 了解衬线字体和无衬线字体

字体分衬线字体和无衬线字体。

  • 中文衬线字体宋体,英文衬线字体Times New RomanGeorgian等;
  • 无衬线字体,中文雅黑字体,英文ArialVerdanaTahomaHeliveticaCalibra等。

# 等宽字体的实践价值

1. 等宽字体与代码呈现

2. 等宽字体与图形呈现

3. ch单位与等宽字体布局

1ch表示一个0字符的宽度。

# 中文字体和英文名称

Windows常见内置中文字体和对应英文名称。

字体中文名 字体英文名
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft Yahei
微软正黑体 Microsoft JhengHei
楷体 KaiTi
新宋体 NSimSun
仿宋 FangSong

# 一些补充说明

微软正黑体是一款全面支持ClearType技术的TrueType无衬线字体,用于繁体中文系统。

# 字体家族其他成员

# font-weight

# font-style

  • font-style:normal
  • font-style:italic,使用当前字体的斜体
  • font-style:oblique,单纯让文字倾斜

# font-variant

# font属性

# 缩写的font属性

完整语法:[font-style||font-variant||font-weight]?font-size[/line-height]?font-family,(font-sizefont-family是必需项)。

font缩写会破坏部分属性的继承性,必须要带上font-family。利用@font face规则将字体列表重定义为一个字体。

# 使用关键字值得font属性

font属性支持关键字属性值,语法:font:caption|icon|menu|message-box|small-caption|status-bar

  • caption:活动窗口标题栏使用的字体
  • icon:包含图标内容所使用的字体,如所有文件夹名称、文件名称、磁盘名称,浏览器窗口标题所使用的字体
  • menu:菜单使用的字体,如文件夹字体
  • message-box:消息盒里面使用的字体
  • small-caption:调色板标题所使用的字体
  • status-bar:窗体状态栏使用的字体

使用关键字作为属性值必须是独立的,不能添加font-familyfont-size等。

# font关键字属性值的应用价值

//推荐使用
html {font: menu;}
body {font-size: 16px;}

html {font: small-caption;}
body {font-size: 16px;}

html {font: status-bar;}
body {font-size: 16px;}

# @font face规则

# @font face的本质是变量

@font face的本质上就是一个定义字体或字体集的变量,包括字体重命名、默认字体样式设置等。

@font face规则支持的CSS属性有font-familysrcfont-stylefont-weightunicode-rangefont-variantfont-stretchfont-feature-settings

@font-face {
    font-family: 'example';
    src: url("example.ttf");
    font-style: normal;
    font-weight: normal;
    unicode-range: U+0025-00FF;
    font-variant: small-caps;//忽略
    font-stretch: expanded;//忽略
    font-feature-settings: "ligal" on;//忽略
}

1. font-family

@font-face {
    font-family: '$';
    src: url("example.ttf");
}

2. src

如果是使用系统字体,则使用local()功能符;如果使用外链字体,则使用url()功能符。

@font-face {
    font-family: ICON;
    src: url("icon.eot") format('eot');
    src: url("icon.eot?#iefix") format("embedded-opentype"),
    url("icon.woff2") format("woff2"),
    url("icon.woff") format("woff"),
    url("icon.ttf") format("truetype"),
    url("icon.svg#icon") format("svg");
    font-style: normal;
    font-weight: normal;
}
  • eot格式是IE私有的。(舍弃
  • woff是专门为Web开发而设计的字体格式。(次优先使用
  • woff2是比woff尺寸更小的字体,是Web开发首选字体。(优先使用
  • ttf格式作为系统安装字体比较多。(舍弃

推荐使用方法

@font-face {
    font-family: ICON;
    src: url("icon.eot") format('eot');
    src: local('☺'),
    url("icon.woff2") format("woff2"),
    url("icon.woff") format("woff"),
    url("icon.ttf") format("truetype");
}

3. font-style

4. font-weight

5. unicode-range

unicode-range的作用是可以让特定的字符或特定范围的字符使用指定的字体。

# @font face与字体图标技术

.icon {
    font-family: ICON;
}

.icon-microphone:before {
    content: '\1f3a4';
}

# 文本的控制

# text-indent与内联元素缩进

text-indent负值隐藏文本内容。

See the Pen text-indent与纯文本对齐布局 by whjin (@whjin) on CodePen.

  1. text-indent仅对第一行内联盒子内容有效;
  2. 非替换元素以外的display计算值为inline的内联元素设置text-indent值无效,如果计算值是inline-block/inline-table则会生效。因此,如果父级块状元素设置了text-indent属性值,子inline-block/inline-table需要设置text-indent:0重置。
  3. input标签按钮text-indent值无效。
  4. button标签按钮text-indent值有效,但存在兼容性问题。
  5. inputtextarea输入框的text-indent在低版本IE下有兼容性问题。

# letter-spacing与字符间距

letter-spacing特性:

  1. 继承性;
  2. 默认值是normal不是0
  3. 支持负值,且值足够大时会让字符形成重叠,甚至反向排列。
  4. 第一行都会保留至少一个字符。
  5. 支持小数值。
  6. 暂时不支持百分比值。

# word-spacing与单词间距

word-spacingletter-spacing共同特性:

  1. 具有继承性;
  2. 默认值都是normal
  3. 都支持负值,都可以让字符重叠,不适合使用word-spacing来清除空白间隙。
  4. 都支持小数值。
  5. 间隔算法都会受到text-align:jusitify两端对齐的影响。

两者差异:

letter-spacing作用域所有字符,word-spacing仅作用于空格字符(增加空格的间隙宽度)。

# 了解word-breakword-wrap的区别

word-break属性语法:

  • word-break:normal
  • word-break:break-all:允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行
  • word-break:keep-all:不允许CJK文本中的单词换行,只能在半角空格或连字符处换行。实际上和normal一致。移动端不适合使用这个属性值。

word-wrap语法:

  • word-wrap:normal:正常的换行规则
  • word-wrap:break-word:一行单词中没有换行点时换行,CSS3中名称overflow-wrap

word-break:break-all的作用是所有的都换行,而word-wrap:break-word则是如果这一行文字有了可换行的点(如空格或CJK等),就在这些换行点换行。

See the Pen word-break:break-all和word-wrap:break-word的区别 by whjin (@whjin) on CodePen.

# white-space与换行和空格的控制

1. white-space的处理模型

white-space属性声明了如何处理元素内的空白字符,包括空格键Space回车键Enter制表符Tab产生的空白。white-space可以决定图文内容是否在一行显示(回车键是否生效),是否显示大段连续空白(空格是否生效)等。

其属性值包括:

  • normal:合并空白字符和换行符。
  • pre:空白字符不合并,并且内容只在有换行符的地方换行。
  • nowrap:和normal一样会合并空白字符,但不允许文本环绕。
  • pre-wrap:和pre一样,但允许文本环绕。
  • pre-line:合并空白字符,但只在有换行符的地方换行允许文本环绕。

white-space的功能有3个维度,分别是:是否合并空白字符是否合并换行符文本是否自动换行

**`white-space`不同属性值功能示意**

| 属性 | 换行 | 空格和制表 | 文本环绕 | | ---------- | | normal | 合并 | 合并 | 环绕 | | nowrap | 合并 | 合并 | 不环绕 | | pre | 保留 | 保留 | 不环绕 | | pre-wrap | 保留 | 保留 | 环绕 | | pre-line | 保留 | 合并 | 环绕 |

2. white-space与最大可用宽度

white-space设置为nowrap时,元素的宽度表现为最大可用宽度,换行符和一些空格全部合并,文本一行显示。

  1. 包含块尺寸大小处理。绝对定位和inline-block元素都具有包裹性,当文本内容宽度超过包含块宽度时,就会发生文本环绕现象。
  2. 单行文字溢出...效果text-overflow:ellipsis;文字内容超出打点效果离不开white-space:nowrap;声明。
  3. 水平列表切换效果。如果列表的数目是不固定的,使用white-space:nowrap;使列表一行显示。

# text-align与元素对齐

text-align:justify想要实现两端对齐布局效果,需要满足两点:一是有分隔点,如空格;二是要超过一行,此时不是最后一行内容会两端对齐。

text-align-last属性,可以规定最后一行内联内容的排列方式。

.justify {
    text-align-last: justify;
}

这个方法存在兼容性问题。

# 如何解决text-decoration下划线和文本重叠的问题

对于纯内联元素,垂直方向的padding属性和border属性对原来的布局定位等没有任何影响。

使用border-bottom模拟text-decoration下划线解决文本重叠的问题

# text-transform字符大小写

text-transform是为英文字符设计,全大写text-transform:uppercase全小写text-transform:lowercase

1. 场景一:身份证输入

2. 场景二:验证码输入

# 了解:first-letter/:first-line伪元素

# 深入:first-letter伪元素及其实例

1. ::first-letter伪元素生效的前提

  • 元素的display计算值必须是blockinline-blocklist-itemtable-cell/table-caption,其他值没有用。
  • 可以直接作为伪元素的字符是数字、英文字母、中文、$、一些运算符,以及一些“空格”。
  • 字符前面不能有图片或inline-block/inline-table之类的元素存在。

2. ::first-letter伪元素可以生效的CSS属性

字符被选做::first-letter伪元素,只有一部分有效:

  • 所有字体相关属性:fontfont-stylefont-variantfont-weightfont-sizeline-heightfont-family
  • 所有背景相关属性:background-colorbackground-imagebackground-positionbackground-repeatbackground-sizebackground-attachment
  • 所有margin相关属性:marginmargin-top/right/bottom/left
  • 所有padding相关属性:paddingpadding-top/right/bottom/left
  • 所有border相关属性:borderborder-styleborder-colorborder-width
  • color属性。
  • text-decorationtext-transformletter-spacingword-spacingline-heightfloatvertical-align(只有当float:none时)等属性。

3. ::first-letter伪元素特点

  1. 支持部分display属性值标签嵌套。::first-letter伪元素获取可以跨标签,不仅能选择匿名内联盒子,还能透过层层标签进行选择。

    • display值是inlineblocktabletable-rowtable-captiontable-celllist-item有效。
    • inline-block/inline-table无效。
    • display:flex直接选择下一行的字符内容。
  2. 颜色等权重总是多了一层。::first-letter伪元素作为子元素存在,对于color继承属性,子元素的CSS设置一定比父元素的级别要高,即使使用了!important子元素会先继承,然后再应用自身设置

     p:first-letter {
         color: #cd0000; /*第一个字符的颜色是red*/
     }
    
     p > span {
         color: blue !important;
     }
     <p><span>第一个</span>字符会不会变成红色?</p>
    

4. ::first-letter伪元素实际应用

 <p class="price">¥399</p>
 .price:first-letter {
     margin-right: 5px;
     font-size: xx-large;
     vertical-align: -2px;
 }
 ```

## `:first-line`伪元素 ##

- 只能作用在块级元素上`block/inline-block/list-item/table-cell/table-caption`
- 仅支持部分CSS属性
 - 所有字体相关属性
 - `color`属性
 - 所有背景相关属性
 - `text-decoration`、`text-transfor`、`letter-spacing`、`word-spacing`、`line-height`和`vertical-align`
 - 支持标签嵌套。不支持`table`属性
最后提交: 7/15/2022, 10:42:12 AM