CSS中的字体与排版

2024-04-08 10:25:15

原文链接：https://blog.csdn.net/WuLex

1.连字符断行

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

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

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

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

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 }

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

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

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);
}

顶部加上深色投影

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

文字凸起效果
思路：使用一长串累加的投影，不设模糊并以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;
}

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

<h1>CSS</h1>

<h1><svg overflow="visible" width="2em" height="1.2em"><use xlink:href="#css" /><text id="css" y="1em">CSS</text></svg></h1>

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

字体外发光
思路：准备几层重叠的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;
        }

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

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

用滤镜来实现模糊效果

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

本文整理自《CSS揭秘》

码农公寓