joe*_*eld 12 html css html5 webfonts
某些字体有轮廓,充满一种变体,如果你对重叠的文本使用这些它绘制在经填充文字的轮廓或阴影中风.这不仅仅是一个描绘文本的轮廓,如-webkit-text-stroke-color会给你,因为有时填充的字体包含阴影或其他细节.
以下是一些设计用于这种方式的字体示例.
http://www.myfonts.com/fonts/matchandkerosene/duotone/
http://www.myfonts.com/fonts/scrowleyfonts/stomp/
我有点像这样使用CSS来使用它:
这将创建两个H1跨度并使用上边距将轮廓移动到填充的上方.
但是,这对我来说似乎并不理想.两个问题:
有一个更好的方法吗？我可以忍受不得不复制文本,但我真的想要一种更自动的方式来进行定位.
谢谢!
您可以将轮廓文本放在 h1 内并使用绝对定位而不是估计边距，如在此 jsFiddle 中所示：http://jsfiddle.net/6SakC/4/
这也解决了文本换行的问题。
为了避免重复标记中的文本，您可以使用 JavaScript 创建重复的文本，如 jsFiddle 中所示：http: //jsfiddle.net/6SakC/5/（但这可能不是最好的主意，因为文本可能会在没有轮廓的情况下显示一段时间，并且浏览器设置中偶尔会禁用 JS。）