使用最佳的&符号

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适合您旅程各个阶段的云产品。从 价值 200 美元的免费额度 开始!

我真的很喜欢 Mark Boulton 在他的“更佳排版”演示文稿中使用的一种排版技巧。(该演示文稿的幻灯片 在此。大约在第 109 张幻灯片)。他建议“使用最佳的&符号”。这仅仅意味着在某些字体中,&字符可能有点缺乏光彩,而将其替换为其他字体可以显著提高风格和可读性。他的(很棒的)例子来自 SimpleBits

simplebitsexample.png

现在,这是一个看起来不错的&符号。你甚至可能在一开始就认为它是一个图像,但它纯粹是文本。诀窍只是将&符号用一个具有唯一类的 span 包裹起来,如下所示

<p>Tips <span class="amp">&amp;</span> Tricks</p>

然后将样式应用于该类。你应该整理一个你喜欢的&符号列表,然后在你的样式中按顺序列出它们。即使这些字体不是常见的网络字体,如果你列出几个,你就有很大的机会其中一个会起作用。或者最糟糕的情况是,它只是默认使用衬线字体

span.amp {
   font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif;
   font-size:110%;
   font-style:italic;
}

查看一些关于如何使文本更美观的简单示例

ampersandexample2.png

我应该提到,优秀的 wp-typogrify 插件 自动 将此 span/类添加到 WordPress 博客中的&符号,这非常巧妙,只是它众多优秀功能中的一项。