文字的修饰

作者: loster | 来源:发表于2018-08-24 17:11 被阅读48次

字体是布局中重要的一个环节。对字体的调整影响到网页的整体效果。我们设置字体时，可以参照word里面对字体的调整，更好地记忆调整内容。

最常见的字体调整

字库 font-family

当我们需要对我们的字体类型修改时，需要指定字库。

p {
  font-family: "Trebuchet MS", 微软雅黑, Verdana, sans-serif;
}

按照给定的字库顺序依次寻找，直到找到存在的某一个字库，并且应用。如果给定的字库都在计算机的字体库中查询不到，则会使用默认字库，通常是Time New Roman，中文是宋体。
字库名称有空格时需要用引号引用，以示完整。

定义网络字库 `@font-face`

当我们需要的字体很大几率在客户机中不存在，则可以使用提供的网络字库，使得网页可以按照期望的样式展示。

@font-face {
    font-family: <字体名>;
    src: <字体路径> [<格式>][,<字体路径> [<格式>]]*;
    [font-weight: <粗细>];
    [font-style: <样式>];
}

属性	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal ， condensed， ultra-condensed，extra-condensed， semi-condensed，expanded， semi-expanded， extra-expanded， ultra-expanded	可选。定义如何拉伸字体。默认是 “normal”。
font-style	normal ，italic， oblique	可选。定义字体的样式。默认是 “normal”。
font-weight	normal ，bold， 100-900(整倍)	可选。定义字体的粗细。默认是 “normal”。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。

例如

@font-face {
  font-family: 'Bungee Inline'; /*定义字体库名称*/
  font-style: normal; /*字体样式*/
  font-weight: 400; /*字体*/
  src: local('Bungee Inline') /* local 表示从本地字库中查找指定字库*/, local('BungeeInline-Regular'), url(https://fonts.gstatic.com/s/bungeeinline/v2/Tb-1914q4rFpjT-F66PLCfn8qdNnd5eCmWXua5W-n7c.woff) format('woff') /*url表示从网络给定链接下载字库  format是字体的格式*/;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; /*字体支持的unicode范围*/
}

h2{
    font-family: 'Bungee Inline';
}

关于format()说明

格式	说明
TureTpe(.ttf)格式	.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
OpenType(.otf)格式	.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
Web Open Font Format(.woff)格式	.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
Embedded Open Type(.eot)格式	.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；
SVG(.svg)格式	.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

字体的兼容写法

   @font-face {
    font-family: '字体名';
    src: url('字体名.eot'); /* IE9 兼容模式 */
    src: url('字体名.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('字体名.woff') format('woff'), /* 现代浏览器 */
             url('字体名.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('字体名.svg#grablau') format('svg'); /* Legacy iOS */
   }

但是常规只需要 eot和woff这两种就可以了

 --------当字体准备完成之后，开始正式的字体修饰--------------

颜色 color

字体颜色是最常见的修饰方式，不同的字体颜色产生不同的视觉效果

<style>
p {
  color: red;
}
</style>

色值可以从颜色名对照表中查找浏览器设定好的默认值，也可以用任意的色值方案 -- 十六进制 ，rgb ，hsl 提供色值或者带有alpha通道的rgba，hsla设置半透明字体色彩。

在word里，字体有背景色，但是在css里没有针对字体的背景色，因此没有一个属性叫 "font-background-color"，
但是css提供了一个'background-color' 在调整盒模型时说明用途

字体尺寸 font-size

可以使用像素单位( px )的字体字号，也可以使用磅值（pt），但是不会使用相对尺寸，em rem，因为在换算成像素时，小数部分将会使字体模糊

<style>
p {
  font-size: 20px;
}
</style>

通常浏览器都有最小字体，在chrome中最小字号为 12px以保证文本内容清晰显示

加粗 font-weight

区间为 100 - 900 （100的整数倍）九档，常用的，默认值 normal =400 ，bold =800

lighter 更细一些，相比父元素字体而言
bolder 更粗一些，相比父元素字体而言
倾斜 font-style

我不知道为什么style叫斜体，但是它就是这么定义的，可能是风格吧倾斜风格。
在这个属性中有两种倾斜方式

使用斜体字 italic 。当该字体提供斜体时，可以使用该属性，将常规字体替换为斜体字体，如果字体本身没有携带斜体字，则不会生效
使字体倾斜 oblique 。当该字体不提供斜体字时，将由样式渲染字体为斜体。
normal 这个默认使用常规字体
文本装饰线 text-decoration

该属性是一个复合属性，包括：

text-decoration-color 装饰线颜色
text-decoration-line text-decoration-line 是一个多值属性，可以同时设定多个值
- underline 下划线
- overline上划线
- line-through 贯穿线
- blink 文本闪烁该属性并不是很受支持，并且有了css动画，该属性将被废弃
text-decoration-style 线条风格
- solid 实线
- double 双实线
- dashed 虚线
- dotted 点线
- wavy 波浪线
text-decoration-skip 这是一个css3的属性，用来跳过不显示装饰线的元素，不过目前支持力度有限
- objects 跳过内联块
- spaces 跳过空白符

虽然我们可以同时设定上划线，下划线，贯穿线，但是却没办法单独设置他们的样式颜色，尽管css3标准组织已经提出了相关解决方案，遗憾的是大多数浏览器都是不支持的。

文字描边 text-stroke

当我们想为文字外侧再套一层颜色时，就需要使用到文字描边。
该属性也是复合属性分为 text-stroke-color描边颜色和 text-stroke-width描边厚度两部分。
目前IE 和FF (40 以下) 版本不支持，其余浏览器需要添加内核前缀。

文本大小写转换 text-transform

决定文字内容(主要是西方字体) 大写（uppercase）还是小写（lowercase）还是首字母大写（capitalize）的方式呈现

小型的大写字母 font-variant

当你的大写字母比小写字母高出很多时，使用小型大写字母，将小写的内容转为大写字母来替代原有的大写字母内容。【仅针对小写字母】

<style>
p {
  font-variant : small-caps;
}
</style>
<p>this is small caps</p>

文本阴影 text-shadow

这个元素将以内容文本为蓝本，从当前文本的下方产生文字投影。
这个属性一共有四个属性值，分别是

水平偏移相对于原文本的X轴方向上的偏移
垂直偏移相对于原文本的Y轴方向上的偏移
模糊半径如果为0则阴影不会产生模糊效果
投影颜色如果不设置默认是黑色

投影其实就是灯光照射到物体上产生的阴影，当不同角度的灯光照射进来时，产生了不同程度的投影。因此投影也是可以有多个的

<style>
p {
  text-shadow : 1px -1px 2px blue , 1px 5px 0 red;
}
</style>

方向 direction

这个属性其作用目的是修改内联块的排列方向，仅针对内联块（inline-block），默认是ltr( LEFT-TO-RIGHT )、rtl(RIGHT-TO-LEFT)

  <style>
    div {
      direction: rtl;
    }
  </style>
  <div>
      <button>内联块1</button>
      <button>内联块2</button>
      <span> 文本内容1 , </span>
      <span> 文本内容2 。 </span>
      <span style="background-color: greenyellow"> 文本内容3 ； </span>
  </div>

看下面的效果

image.png

很神奇的发现，内联块1，2的显示顺序调换了，这是因为该属性修改的是内联块的展示方向，会依次从右向左排列，但是另一部分，三个内联元素排列顺序没有变化，是对的，但是没搞懂，为什么最后一个文本内容末尾的符号会被提升到前面去，不应该跟随在文字后面么这不知道是一个 “BUG” 还是别出心裁的设计。

但是我们想象一下民国时期，从右向左书写方式，这时候需要用到文本的写作方向来调整了

文本的方向 unicode-bidi

这个属性需要配合上面的direction一起使用才可以生效

在现代计算机应用中，最常用来处理双向文字的算法是Unicode 双向算法（Unicode Bidirectional Algorithm），简称为 bidi 算法。而unicode字符本身分为强字符、中性字符、弱字符

强字符：强字符方向是确定的，但是在bidi算法中会影响到中性字符的书写方向。比如中文、拉丁文字
中性字符：方向是不确定的，上下文与bidi算法无关，但是会受到强字符影响。比如，一般符号

弱字符：方向是确定的，但是不会对bidi算法产生影响。比如阿拉伯数字以及跟数字相关的符号

一个区域内有总体方向，决定从这个区域的哪边开始书写文字，通常称为基础方向。
浏览器会根据你的默认语言来设置默认的基础方向，如英语、汉语的基础方向为从左到右，阿拉伯语的基础方向为从右到左。

Web中控制文字方向的方式有三种：

html实体（&lrm;、&rlm;）【隐式转换】 &lrm;与&rlm;可以用来打断方向串的连续性，影响中性字符的方向。
bid与bdo标签+dir属性
css属性（direction + unicode-bidi）

具体关于字符方向的，这里有解答
但是还是不理解上述所说的，末尾符号问题。

书写模式 writing-mode
horizontal-tb 默认从左向右从上到下
vertical-rl 垂直方向从右向左类似古代中文书籍书写方式
vertical-lr 垂直方向从左往右

当设置为垂直书写方式时，块元素的宽度将会以content的宽度为准，如果需要设置宽度则需要显示的给出。该属性可被继承

空白符 white-space

很多时候，我们需要保留文内空白符，通常比较傻的情况就是用 这个html语义字符替代，其实css本身就提供了我们对空白符的处理，何必傻兮兮的去替换。
pre 预先使用等宽字体显示格式化文本，不合并空白，文字超出边界时不换行
pre-wrap 不合并空白，和边界发生碰撞时折行
pre-line 保持文本换行，但是不保留空白，边界碰撞时换行
nowrap 不换行，不保留空白，直到文本结束或者遇到 <br/>

tab尺寸 tab-size

当我们开启了空白符时，这是可以设定tab-size的尺寸，在一般的编辑器中，一个tab等于4个space，默认也是如此，因此当我们调整tab与space互转时，就可以用到了。

文字换行 word-break

对于英文等拉丁文，有时长单词会超出边界。这是因为单词被视为整体，不允许折行。这时候就会产生比较大的问题--布局撑破。尽管很少情况下会遇到，这时，我们使用break-all强制换行，即使单词是整体，也会被折行显示，满足布局需要。
对于中文，如果不想换行可以使用keep-all，就表现的和英文单词一致，是不会折行的。

段落折行 overflow-wrap (word-wrap)

IE下定入标准是word-wrap，被W3C组织收编之后修改为overflow-wrap，本质还是不变的。
设定超过边界时换行，以获得更好的展示效果。中英文混排时，会从中英文边界换行。

break-word 设定折行
文本对齐 text-align

比较常用的文本对齐是 left right center，css3中新增justify两端对齐。但是justify不会处理最后一行和第一行。（单独一行是第一行也是最后一行）
新增的start和end 对齐方式依赖于direction设定的方向，即文档的开始方向。start表示向文档开始方向对齐，因此direction:rtl时，表现与left right表现相反。
而match-parent 匹配父级，当匹配父级的start或者end时，基于父级的direction计算得到结果，而inherit则没有限定。
justify-all，同时处理行和行尾的两端对齐，但是并未得到支持。因此还是使用下面的方式最为稳妥。

行尾对齐 text-align-last
上述的text-align不能处理单独行，因此需要使用该属性单独处理
两端对齐方式设定 text-justify

当设定了文本的两端对齐后，需要对两端对齐方式进行设定，然而目前并没有浏览器支持。所以先放弃

单词间距 word-spacing

说白话就是一个空格有多宽。

字母间距 letter-spacing

就是字母跟字母间的间隔，当然中文也可以

段落缩进 text-intend

设定段首缩进像素，然而这个属性只针对块元素和行内块。毕竟内联元素的自己也做不了主。
*## 行高 line-height
行高，即字体最底端与字体内部顶端之间的距离

行高和基准线
当对文本对象垂直居中时，需要了解行高和基准线
baseline对应的垂直位置是常态下小写字母x的底部位置
middle是小写字母x交叉的位置

垂直对齐 vertical-align

垂直对齐就是基于行高和基准线的对齐方式。有baseline 基准线 sub 上标 super 下标
top 元素顶端与行内元素最高的顶端对齐
bottom 元素的顶端与行中最低的元素的顶端对齐
middle 把此元素放置在父元素的中部
text-top 把元素的顶端与父元素字体的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐

文字的修饰

字库 `font-family`

定义网络字库 `@font-face`

关于format()说明

颜色 `color`

字体尺寸 `font-size`

加粗 `font-weight`

倾斜 `font-style`

文本装饰线 `text-decoration`

文字描边 `text-stroke`

文本大小写转换 `text-transform`

小型的大写字母 `font-variant`

文本阴影 `text-shadow`

方向 `direction`

文本的方向 `unicode-bidi`

书写模式 `writing-mode`

空白符 `white-space`

tab尺寸 `tab-size`

文字换行 `word-break`

段落折行 `overflow-wrap` (`word-wrap`)

文本对齐 `text-align`

行尾对齐 `text-align-last`

两端对齐方式设定 `text-justify`

单词间距 `word-spacing`

字母间距 `letter-spacing`

段落缩进 `text-intend`

垂直对齐 `vertical-align`

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

CSS编入集

文字的修饰

字库 font-family

定义网络字库 @font-face

关于format()说明

颜色 color

字体尺寸 font-size

加粗 font-weight

倾斜 font-style

文本装饰线 text-decoration

文字描边 text-stroke

文本大小写转换 text-transform

小型的大写字母 font-variant

文本阴影 text-shadow

方向 direction

文本的方向 unicode-bidi

书写模式 writing-mode

空白符 white-space

tab尺寸 tab-size

文字换行 word-break

段落折行 overflow-wrap (word-wrap)

文本对齐 text-align

行尾对齐 text-align-last

两端对齐方式设定 text-justify

单词间距 word-spacing

字母间距 letter-spacing

段落缩进 text-intend

垂直对齐 vertical-align

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

CSS编入集

字库 `font-family`

定义网络字库 `@font-face`

颜色 `color`

字体尺寸 `font-size`

加粗 `font-weight`

倾斜 `font-style`

文本装饰线 `text-decoration`

文字描边 `text-stroke`

文本大小写转换 `text-transform`

小型的大写字母 `font-variant`

文本阴影 `text-shadow`

方向 `direction`

文本的方向 `unicode-bidi`

书写模式 `writing-mode`

空白符 `white-space`

tab尺寸 `tab-size`

文字换行 `word-break`

段落折行 `overflow-wrap` (`word-wrap`)

文本对齐 `text-align`

行尾对齐 `text-align-last`

两端对齐方式设定 `text-justify`

单词间距 `word-spacing`

字母间距 `letter-spacing`

段落缩进 `text-intend`

垂直对齐 `vertical-align`