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

连字符断行

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>

文本行的斑马条纹

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

调整tab的宽度

    tab-size:4;

连字

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

华丽的&符号

......

自定义下划线

......

现实中的文字效果

发光字效果

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

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

环形文字

......