《HTML5权威指南》之设置文本样式

《HTML5权威指南》之设置文本样式

1.应用基本文本样式

1.1.对齐文本

以下几个属性可以用来对齐文本，如下：

属性                  说明              值
text-align                          start
                                    end
                                    left
                                    right
                                    center
                                    justify
text-justify                        见下

下面是对text-justify属性值做总结：

值                   说明
auto                浏览器选择对齐规则，这是最简单的方法
none                禁用文本对齐
inter-word          空白分布在单词之间，适用于英文等词间有空的语言
inter-ideograph     空白分布在单词之间,表意字之间，且文本两端对齐，适用于汉语，日文和韩文等语言

1.2.处理空白

空白在HTML文档中通常是被压缩或者直接忽略掉，浏览器遇到多个空格时，会将它们压缩为一个空格。 下面对whitespace属性及其值进行说明：

属性              说明                  
whitespace      指定空白字符的处理方式

下面对其值进行说明：

值               说明
normal          默认值，空白符被压缩，文本行自动换行
nowrap          空白符被压缩，文本行不换行
pre             空白符被保留，文本只在遇到换行符的时候换行，这个pre元素的效果一样
pre-line        空白符被压缩，文本行会在一行排满或遇到换行符时换行
pre-wrap        空白符被保留，文本行会在一行排满或遇到换行符时换行

说明： pre-line和pre-wrap的区别在于，如果在文本内出现多个空白字符，是否保留，例如：”a bb v”，如果按照pre-line的处理方式的结果是:”a bb v”也就是空白符被压缩，如果pre-wrap则保持原状。
示例代码：

<style type="text/css">
    #myid {
        ...
        whitespace: pre-line;
    }
</style>
body内结构：
<p id="myid">...</p>

1.3.指定文本方向

direction属性告诉浏览器文本快的排列方向，如下表所示：

属性              说明              值
direction       设置文本方向      ltr(左对齐)
                                rtl(右对齐)

1.4.指定单词,字母,行之间的间距

可以告诉浏览器单词与单词之间，字母与字母之间，行与行之间的间距，相关属性列在了下表中：

属性              说明                  值
letter-spacing  设置字母间的间距        normal
                                    <长度值>
word-spacing    设置单词之间的间距       normal
                                    <长度值>
line-height     设置行高                normal
                                    <数值>
                                    <长度值>
                                    <%>

示例代码：

<style type="text/css">
    #myid {
        ...
        word-spacing: 10px;
        letter-spacing: 2px;
        line-height: 3em;
    }
</style>
body内结构：
<p id="myid">...</p>

1.5.控制断词

word-wrap属性告诉浏览器当一个单词的长度超过包含块的宽度时该如何处理，这个属性允许的值列在下面：

值               说明
normal          单词不断开，即使无法全部包含在块里面
break-word      单词断开

示例代码：

<style type="text/css">
    word-wrap: break-word;
</style>

1.6.首行缩进

text-indent属性用于指定文本块首行缩颈，值可以是长度值，也可以是相对元素宽度的百分数，总结如下：

属性                  说明                  值
text-indent         设置文本首行缩进        <长度值>
                                          <%>

2.文本装饰与大小写转换

text-decoration和text-transform两个属性分别允许我们装饰文本和转换文本大小写，两个属性的描述如下：

属性                  说明                  值
text-decoration     为文本应用装饰效果       none(没有任何装饰)
                                        underline(下划线)
                                        overline(顶线)
                                        line-through（删除线）
                                        blink
text-transform      为文本块转换大小写       none
                                        capitalize
                                        uppercase
                                        lowercase

示例代码：

<style type="text/css">
     p {
        ...
        text-decoration: line-through;
        text-transform: uppercase;
    }
</style>

3.创建文本阴影

创建文本阴影使用属性text-shadow进行设置，总结如下：

属性              说明              值
text-shadow     为文本块应用阴影    <h-shadow> <v-shadow> <blur> <color>

其中h-shadow和v-shadow分别指定阴影的水平偏移和垂直偏移，它们的值用长度值表示，允许负值。blur是一个长度值，定义了阴影的模糊程度，color指定了阴影的颜色。
示例代码如下：

<style type="text/css">
    h1 {
        text-shadow: 0.1em  .1em  1px lightgray;
    }
</style>

4.使用字体

先对字体属性做一个总结说明：

属性              说明                              值
font-family     指定文本快采用的字体名称            4.1进行说明
font-size       指定文本块的字体大小              4.1进行说明
font-style      指定字体样式                      Normal
                                                italic
                                                oblique
font-variant    指定字体是否以小型大写字母显示     Normal
                                                smallcaps
font-weight     设置字体粗细                      Normal
                                                bold
                                                bolder
                                                lighter
font            简明属性

4.1.选择字体

font-family指定使用的字体，按照优先顺序排列。浏览器从字体列表中一个一个尝试，直到发现合适的字体为止。CSS定义了几种任何情况下都可以使用的通用字体，有几类字体称为通用字体。如下：

通用字体系列              实现字体示例
serif                   Times
sans-serif              Helvetica
cursive                 Zapf-Chancery
fantasy                 Western
monospace               Courier

示例代码：

<style type="text/css">
    p {
        font-family: "HelveticaNeue  Condensed",monospace;
    }
</style>

前面的这种字体比较少见，后面跟上一种字体，以防用户电脑上没有这种字体。

4.2.设置字体大小

font-size属性用来指定字体的大小，属性值如下：

值               说明
xx-small        设置字体大小，浏览器会决定每个值代表的具体大小
x-small
small
medium
large
x-large
xx-large
smaller         设置字体相对于父元素字体的大小
larger
<length>        使用css长度值精确的设置
<%>             将字体大小设置为父元素字体大小的百分数

4.3.设置字体样式和粗细

使用font-weight和font-style属性可以设置字体的粗细和样式，示例代码如下：

<style type="text/css">
    #first {
        font-weight: bold;
        font-style:  italic;
    }
</style>

5.使用Web字体

使用web字体能够解决用户机器上可能不存在页面上的字体，下面是示例代码：

<style type="text/css">
    @font-face {
        font-family: 'MyFont';
        font-style: normal;
        font-weight: normal;
        src: url('http://....');
    }
    p {
        font-family: MyFont,cursive;
    }
</style>

使用@font-face的时候，需要使用标准字体属性来描述正在使用的字体，font-family属性定义字体的名称，用来引用要下载的字体。