CSS中的字体与排版

逃离我推掉我的手 2021-06-26 16:06 405阅读 0赞

## 1.连字符断行 ##

问题：两端对齐的效果的时候，折行效果有的时候真的很丑。  
解决：使用`hyphens`属性。

`hyphens` 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。  
它接受三个值：`none，manual`和`auto`。它的初始值是`manual`，以匹配现有的行为：我们可以用软连字符手动断字。

width: 8.7em;
    font: 180%/1.4 Baskerville, serif;
    text-align: justify;
    hyphens: auto;

![Paste\_Image][Paste_Image]

## 2.插入换行 ##

*  问题：对于表格元素，如何使多个`<dd>`元素在同一行，如何在最后一个`<dd>`元素后面插入换行符
 *  解决方案： 使用伪元素，在`<dd><dt>`中间插入换行符“`\A`”.  
    在`<dd><dd>`中间插入“，” 使用`white-space: pre;`保留源代码中的空格和换行 重点代码：

dd + dt::before { //使用伪元素，在<dd><dt>中间插入换行符“\A”.
        content: "\A";
        white-space: pre;
    }
    
    dd + dd::before { //在<dd><dd>中间插入“，”
        content: ', ';
        font-weight: normal;
        margin-left: -.25em;
    }

HTML：

<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>

CSS：

dt, dd { 
        display: inline;
        margin: 0;
    }
    
    dd { 
        font-weight: 600;
    }
    
    dd + dt::before { //使用伪元素，在<dd><dt>中间插入换行符“\A”.
        content: "\A";
        white-space: pre;
    }
    
    dd + dd::before { //在<dd><dd>中间插入“，”
        content: ', ';
        font-weight: normal;
        margin-left: -.25em;
    }
    
    body { 
        font: 150%/1.6 Baskerville, Palatino, serif;
    }

![Paste\_Image.png][Paste_Image.png]

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

*  解决：利用`linear-gradient`创建条纹背景，使其的宽度与行高相符
 *  注意：`padding`会使元素与条纹背景出现错位，所以要对背景设置`background-origin:content-box`，消除影响

pre {  
        padding: .5em;
        line-height: 1.5;
        background: hsl(20, 50%, 95%);
        background-image: linear-gradient(
                          rgba(120,0,0,.1) 50%, transparent 0);
        background-size: auto 3em; //两行
        background-origin: content-box;
        font-family: Consolas, Monaco, monospace;
    }
    code {  font: inherit }

![Paste\_Image][Paste_Image 1]

## 4.调整`tab`的宽度 ##

\-问题：`tab`在浏览器中的宽度为8个字符，我们一般会调整成我们习惯的宽度4或2.

tab-size: 2

## 5.连字 ##

问题：某些字形与字形相邻时会带来显示上的问题。比如大多数衬线字体中的`f`和`i`。在`css`第三版中，引入了`font-variant-ligatures`属性。

font-variant-ligatures: comon-ligatures
                            discretionary-ligatures
                            historical-ligatures

## 6.自定义下划线 ##

用`background-image`及其相关属性来形成下划线

a { 
        background: linear-gradient(gray, gray) no-repeat;
        background-size: 100% 1px;
        background-position: 0 .9em;
        text-shadow: .05em 0 white, -.05em 0 white;
    }

![Paste\_Image.png][Paste_Image.png 1]

a { 
        background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;
        background-size: .2em 2px;
        background-position: 0 .9em;
    }

![Paste\_Image.png][Paste_Image.png 2]

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

**凹进去的字体效果**

*  思路：底部加上浅色投影或者顶部加深色投影

**底部加上浅色投影**

p { 
        padding: .8em 1em;
        background: hsl(210, 13%, 60%);
        color: hsl(210, 13%, 30%);
        text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
    }

![Paste\_Image.png][Paste_Image.png 3]  
**顶部加上深色投影**

p + p { 
        background: hsl(210, 13%, 30%); 
        color: hsl(210, 13%, 60%);
        text-shadow: 0 -1px 1px black;
    }

![Paste\_Image.png][Paste_Image.png 4]  
**文字凸起效果**  
思路：使用一长串累加的投影，不设模糊并以`1px`的跨度逐渐错开，使颜色逐渐变暗，然后在底层加上一层强烈模糊的暗投影，从而实现效果

body { 
        background: #58a;
        color: white;
        text-shadow: 0 1px hsl(0,0%,85%),
                     0 2px hsl(0,0%,80%),
                     0 3px hsl(0,0%,75%),
                     0 4px hsl(0,0%,70%),
                     0 5px hsl(0,0%,65%),//亮度l逐渐变暗
                     0 5px 10px black; //底层加上一层强烈模糊的暗投影
        font: bold 500%/1 Rockwell, serif;
    }

![Paste\_Image][Paste_Image 2]

**空心字**  
思路：使用`SVG`描边方法

h1 { 
        margin: 0;
        color: white;
    }
    
    h1:first-child {  text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black; }
    
    h1 text {  fill: currentColor }
    h1 use { 
        stroke: black; 
        stroke-width: 6;
        stroke-linejoin: round;
    }
    
    body { 
        background: deeppink;
        font: bold 200%/1 Rockwell, serif;
    }

![Paste\_Image.png][Paste_Image.png 5]

**字体外发光**  
思路：准备几层重叠的`text-shadow`，不考虑偏移量，颜色保持跟字体一样。  
可以加上过渡效果，使得鼠标悬停时出现效果，`transition:1s`.

a { 
                padding: .5em;
                line-height:1.5;
                background: #203;
                color: white;
                transition: 1s;
            }
            
            a:hover { 
                text-shadow: 0 0 .1em, 0 0 .3em;
            }

![Paste\_Image.png][Paste_Image.png 6]  
![Paste\_Image.png][Paste_Image.png 7]

如果在`hover`的时候把字体本身的颜色变成透明，则出现模糊效果

a:hover { 
                color: transparent;
                text-shadow: 0 0 .1em white, 0 0 .3em white;
            }

![Paste\_Image.png][Paste_Image.png 8]

用滤镜来实现模糊效果

a:hover { 
                filter: blur(.1em);
            }

![Paste\_Image.png][Paste_Image.png 9]  
本文整理自《CSS揭秘》

[Paste_Image]: /images/20210626/3959bb8aa0314f84be6b40c5fd66e7c6.png
[Paste_Image.png]: /images/20210626/d6cdeda1a5d44a379a6e4b47333582c6.png
[Paste_Image 1]: /images/20210626/1291a72d91f54489bf149b9f58c58425.png
[Paste_Image.png 1]: /images/20210626/037d7d06889247dba461b83172fd8075.png
[Paste_Image.png 2]: /images/20210626/0af2262de89f46e6b0fff1f2be59c28a.png
[Paste_Image.png 3]: /images/20210626/60a5e3f07ff44abf8568bad03fcdc667.png
[Paste_Image.png 4]: /images/20210626/ddda62c5d6d848f189436b9c46fe1bef.png
[Paste_Image 2]: /images/20210626/e0b775dec14347eb8e76dd8279f30291.png
[Paste_Image.png 5]: /images/20210626/97f260de80d04b59b9469b45fc0437a9.png
[Paste_Image.png 6]: /images/20210626/36803d9707b041f49ab9f8829150c345.png
[Paste_Image.png 7]: /images/20210626/5369bb639dcf47d0b031b5c2a4279a68.png
[Paste_Image.png 8]: /images/20210626/ba41b296e0aa4846a76495042b44c7e5.png
[Paste_Image.png 9]: /images/20210626/2475dd9e0e194225b006887ea1d18580.png