CSS进阶（四）字体排印

CSS进阶（四）字体排印

一、连字符断行

解决方案：

CSS文本引入了新的属性：hyphens。接受3个值：none、manual（初始值）、auto。

• manual：可以在任何时候手工插入软连字符，来实现断词折行的效果

 

二、插入换行

上面这种效果的代码结构：

<dl>
    <dt>Name:</dt>
    <dd>Jocky</dd>

    <dt>Email:</dt>
    <dd>lee@xxx.mmm</dd>

    <dt>Location:</dt>
    <dd>Earth</dd>
</dl>

 

解决方案：

需要在dd后面加上换行符，并保证换行符不会与相邻的其他空格进行合并

dt,dd {
    display: inline;
}

dd {
    margin: 0;
    font-weight: bold;
}

dd::after {
    content: '\A'; /*换行符用'\000A'或'\A'表示*/
    white-space: pre; /*空白被浏览器保留*/
}

但不够健壮，不适合一个dt后有多个dd的情况

dd + dt::before {  /*选中dt*/
    content: '\A'; 
    white-space: pre; 
}
 
dd + dd::before {  /*选中第二个dd*/
    content: ', '; 
    margin-left:-.25em /*修复多个连续的dd之间包含空格符，导致逗号前面有空格的情况*/
    font-weight:normal;
}

补充：

复合选择器 ‘+’ ：两个元素有同一个父亲且相邻，选择的是两者中的后一个元素

 

三、文本行的斑马条纹

问题背景：如何给文本加上斑马条纹

解决方案：

       对整个元素设置统一的背景图像，一次性加上所有的斑马条纹，即在CSS中使用渐变直接生成背景图像，且可以用em单位来设定背景尺寸，子使用font-size的变化

 
未加background-origin：

background-position默认是以padding box为基准

width: 200px;
height: 200px;
padding: .6em;
margin: 200px;
line-height: 1.5;
background: beige;
background-image: linear-gradient(rgba(0,0,0,.3) 50%,transparent 0);
background-size: auto 3em;
/*background-size 需要设置为line-height的两倍*/

 
添加background-origin：

添加了background-origin: content-box;后浏览器解析background-position就是以content box的外沿为基准

width: 200px;
height: 200px;
padding: .6em;
margin: 200px;
line-height: 1.5;
background: beige;
background-image: linear-gradient(rgba(0,0,0,.3) 50%,transparent 0);
background-size: auto 3em;
background-origin: content-box;

 

四、调整tab的宽度

问题背景：

在网页中使用<pre>和<code>来显示代码，他们具有浏览器赋予的默认样式：

pre,code {
    font-family:monspace;
}

pre {
    display:block;
    margin:1em 0;
    white-space:pre;
}

问题是：及时tab很适合用来缩进代码，但是浏览器会把宽度显示为8个字符就很难看

 

解决方案：

使用CSS的属性tab-size，其接受一个数字（表示字符数）或者一个长度值（不常用），通常设置为4或者2

pre {
    tab-size:2;
}

 

五、连字

CSS字体（第三版）：http://w3.org/TR/css3-fonts

      font-varient 升级成一个简写属性，其中之一叫做font-variant-ligatures，用来控制连字效果的开启和关闭。若要启用所有可能的连字，需要同时指定以下三个标识符：

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

该属性可继承。

font-variant-ligatures: common-ligatures
/*和*/
font-variant-ligatures: common-ligatures
						no-discretionary-ligatures
						no-historical-ligatures;
/*等价*/

       若要把 font-variant-ligatures 属性复原为初始值，应该使用normal 而不是 none。none会把所有的量子效果都关掉

 

六、华丽的&符号

解决方案：

       通常我们会指定多个字体，浏览器选择最优字体，若最优字体不可用，浏览器还可以回退到其他符合整体设计风格的字体上去。这个机制对于单个字符也奏效。即若某款字体可用，但仅包括几个字符，那它就只会用来显示这几个字符；而在显示其他字符时，浏览器会回退到其他字体。这个规则对本地字体和通过@font-face规则引入的嵌入字体均有效

      只美化&的方法：创建一种只包含&的web字体，通过@font-face将其引入网页，然后把它排在字体队列的第一位：

@font-face {
    font-family:Ampersand;
    src:local('Baskerville'),
        local('Goudy Old Style'),
        local('Garamond'),
        local('Palatino');  /*local函数指定本地字体名称*/
    unicode-range: U+26; /*声明先用本地字符来显示哪些字符*/
}

h1 {
    font-family:Ampersand,Helvetica,sans-serif;
}

未添加unicode-range，所有字符都有效果：

添加了unicode-range，只有&有效果：

 

补充：unicode-range

语法基于“Unicode码位”，所以使用之前需要查出指定字符的十六进制码位，在控制台输入：

"&".charCodeAt(0).toString(16) //返回26

• 若想指定字符区间，则要加上U+前缀 如：U+400-4FF；

• 使用通配符：U+4??

• 同时指定多个字符或区间需要用逗号隔开

 

七、自定义下划线

解决方案：

7.1 实线下划线

运用background-image及其相关属性

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

• text-shadow 用来保证下划线不会穿过某些字母的降部。

 

7.2 虚线下划线

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

       通过色标的百分比位置值来微调虚线的虚实比例，还可通过background-size调整虚线的疏密。

 

八、现实中的文字效果

8.1 凸版印刷效果

适用场景：

• 中等亮度背景配上深色文字的场景（在底部加浅色投影）；

• 深色底、浅色字的场景（文字顶部加上深色投影）；

• 只要文字不是黑色并且背景不是纯黑或者纯白就行。

原理：

       现实世界总是习惯光源在头顶，凸起物下方会产生阴影，而凹陷物的底部边缘会被打亮

 

案例1（中等亮度底，深色字）：

在底部加浅色投影

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

 

案例2（深色底，浅色字）：

文字顶部加上深色投影

p {
    background: hsl(210,13%,40%);
    color: hsl(210, 13%, 75%);
    text-shadow: 0 -.03em .03em black;
}

 

8.2 空心字效果

方法一：使用多个text-shadow

background: deeppink;
color: white;
text-shadow: 2px 2px black,-2px -2px black,
			-2px 2px black,2px -2px black;

 

方法二：使用SVG

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

h1 {
    box-sizing: border-box;
    padding: 1em;
    margin: 200px;
    width: 300px;
    height: 300px;
    font: 500%/1 Rockwell,serif;
    background: deeppink;
    color: white;
}

h1 text{
    fill: currentColor;
}

h1 svg {
    overflow:visible;
}
h1 use {
    stroke: black;
    stroke-width: 6;
    stroke-linejoin: round;
}

 

8.3 文字外发光效果

方法一：用几层重叠的text-shadow

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

 
若是要为鼠标悬停添加效果：

a {
    background: #203;
    color: white;
    transition: 1s;
}

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

在：hover下把文字隐藏：

a {
    background: #203;
    color: white;
    transition: 1s;
}

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

 

方法二：使用CSS滤镜

a {
    background: #203;
    color: white;
    transition: 1s;
}

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

}

九、文字凸起效果

CSS文本装饰：http://w3.org/TR/css-text-decor

思想：

使用一长串累加的投影，不设模糊并以1px的跨度逐渐错开，使颜色逐渐变暗，然后在底部加上一层强烈模糊的暗投影，从而模拟完整的立体效果。
 

案例1：

P {
    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%),
                0 5px 10px black;
}

 
使用预处理器：

@mixin text-3d($color:white,$depth:5) {
    $shadows:();
    $shadow-color:$color;

    @for $i from 1 through $depth {
        $shadow-color: darken($shadow-color,10%);
        $shadows :append($shadows, 0 ($i * 1px) $shadow-color,comma);
    }

    color:$color;
    text-shadow:append($shadows, 0 ($depth * 1px) 10px black,comma);
}

h1 {
    @include text-3d(#eee,4);
}

 

案例2：

P {
    background: hsl(0, 50%, 45%);
    color: white;
    text-shadow: 1px 1px black,2px 2px black,
                 3px 3px black,4px 4px black,
                 5px 5px black,6px 6px black,
                 7px 7px black,8px 8px black;
}

 
使用预处理器：

@mixin text-retro($color:black,$depth:8) {
    $shadows:(1px 1px $color);

    @for $i from 2 through $depth {
        $shadows :append($shadows, ($i * 1px) ($i * 1px) $color,comma);
    }

    return $shadows;
}

h1 {
    background: hsl(0, 50%, 45%);
    color: white;
    text-shadow: text-retro();
}

 

九、环形文字

解决方案：

<div class="circular">
    <svg viewBox="0 0 100 100">
        <path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle"/>
        <text>
            <textPath xlink:href="#circle">
                circular reasoning works so happy i am !
            </textPath>
        </text>
    </svg>
</div>

.circular path{
    fill:none;
}
.circular {
    width: 20em;
    height: 20em;
    margin: 3em auto 0;
}

.circular svg {
    display: block;
    overflow: visible;
}

 

改进：

若是好多处都需要用到这种效果，我们肯定不希望svg在每个地方都重复，我们就可以写一小段脚本来自动生成必要的svg元素

<div class="circular">
     circular reasoning works so happy i am !
</div>

$$('.circular').forEach(function(el){
    var NS = 'http://www.w3.org/2000/svg';
    var xlinkNS = 'http://www.w3.org/1999/xlink';
    var svg = document.createElementNS(NS,'svg');
    var circle = document.createElementNS(NS,'path');
    var text = document.createElementNS(NS,'text');
    var textPath = document.createElementNS(NS,'textPath');
    svg.setAttribute('viewBox','0 0 100 100');

    circle.setAttribute('d','M 0,50 a 50,50 0 1,1 0,1 z');
    circle.setAttribute('id','circle');

    textPath.textContent = el.textContent;
    textPath.setAttributeNS(xlinkNS,'xlink:href','#circle');

    text.appendChild(textPath);
    svg.appendChild(circle);
    svg.appendChild(text);
    el.textContent='';
    el.appendChild(svg);
});