[CSS]《CSS揭秘》第五章——字体排印

蔚落 2022-02-28 12:48 260阅读 0赞

### 连字符断行 ###

hyphens:auto;

\*:需要在HTML的lang属性指定支持的语言  
\*\*：chrome尚未支持  
*\**：与word-wrap: break-word结合使用

### 插入换行 ###

dt,dd{
        display: inline;
    }
    dd{
        margin: 0;
        font-weight: bold;
    }
    dd+dt::before{//避免首个dt前面也加入空行
        content: '\A';//换行符
        white-space: pre;
    }
    dd+dd::before{//
        content:',';
        font-weight: normal;
        margin-left: -0.25em;//避免逗号前面的空格，不一定为-.25em
    }
    
    
    <dl>
        <dt>Name:</dt>
        <dd>Lea Verou</dd>
        <dt>Email:</dt>
        <dd>lea@verou.me</dd>
        <dd>leaverou@mit.edu</dd>
        <dt>Location:</dt>
        <dd>Earth</dd>
    </dl>

![clipboard.png][]

### 文本行的斑马条纹 ###

.testdiv{
        white-space: pre;
        padding: .5em;
        background: #fb3;
        line-height: 1.5em;
        background-image: linear-gradient(yellowgreen 50%, transparent 0);
        background-size: auto 3em;
        background-origin: content-box;
    }

![clipboard.png][clipboard.png 1]

### 调整tab的宽度 ###

tab-size:4;

![clipboard.png][clipboard.png 2]

### 连字 ###

font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

### 华丽的&符号 ###

......

### 自定义下划线 ###

......

### 现实中的文字效果 ###

#### 发光字效果 ####

.testdiv{
        background: #203;
        color: #ffc;
        text-shadow: 0 0 .1em, 0 0 .3em;
    }

![clipboard.png][clipboard.png 3]

\*:text-shadow: h-shadow v-shadow blur color;

### 环形文字 ###

......

[clipboard.png]: /images/20220228/1b0bba8e7924464dbd23ba0d6e706b1d.png
[clipboard.png 1]: /images/20220228/8ef1233b68b34234940cc06ca5b23a94.png
[clipboard.png 2]: /images/20220228/ce53b6a3a1fe4f32a1581053cffc1ffe.png
[clipboard.png 3]: /images/20220228/e22f1c4d4db54308a242e1d3698c1410.png