CSS3——文本样式

红太狼 2022-07-19 02:14 266阅读 0赞

*   *  文字阴影与自动换行
        
         *  text-shadow
            
             *  文字阴影
             *  多个阴影
         *  word-break
         *  word-wrap
     *  字体
        
         *  服务器字体font-family可以自定义
            
             *  默认字体
             *  根据字体样式选择对应字体
         *  本地字体自带字体
         *  font-variant
         *  font-weight
         *  font-stretch
         *  font-size

--------------------

## 文字阴影与自动换行 ##

### text-shadow ###

#### 文字阴影 ####

后面可以跟四个参数，意义分别是：文字前与阴影的距离(阴影相对于首文字左上角的X坐标)，文字后与阴影的距离（阴影相对于首文字左上角的Y坐标），阴影模糊半径（模糊程度），阴影颜色

例如：

text-shadow: 0px 10px 20px red;

#### 多个阴影 ####

例如：

text-shadow: 0px 0px 5px red,15px 15px 5px green;

--------------------

### word-break ###

文字换行  
属性值：  
normal：使用默认换行规则  
break-all：只能在半角空格或连字符处理换行  
keep-all：允许在单词内换行

--------------------

### word-wrap ###

长单词和URL地址自动换行

属性值：  
normal：浏览器默认换行  
break-word：内换行

--------------------

## 字体 ##

### 服务器字体(font-family可以自定义) ###

#### 默认字体 ####

@font-face {
        font-family: webfont;
        src: url(font.otf);
    }
    h1{
        font-family: webfont;
    }

#### 根据字体样式选择对应字体 ####

@font-face {
        font-family: webfont;
        src: url(font.otf);
    }
    @font-face {
        font-family: webfont;
        font-style: italic;
        src: url(font_.otf);
    }
    
    h1{
        font-family: webfont;
        font-style: italic;
    }

--------------------

### 本地字体(自带字体) ###

@font-face {
        font-family:localfont;
        src: local('Arial');
    }
    h1{
        font-family: localfont;
    }

--------------------

### font-variant ###

设置文本是否大小写

属性值：  
normal：默认  
small-caps：强化大小写，大写的话更大，小写的话变大

--------------------

### font-weight ###

设置文本粗细

属性值：  
normal：默认  
bold：粗体  
bolder：更粗  
lighter：更细

100~900：从细到粗，必须是100的倍数