如何使用 HTML 和 CSS 创建流畅的标题？答案

【问题标题】：How to create smooth headlines with HTML and CSS?如何使用 HTML 和 CSS 创建流畅的标题？
【发布时间】：2011-01-19 20:37:24
【问题描述】：

我最近看到很多网页，标题都很流畅，比如这个网站：http://boagworld.com/

他们是如何做到这一点的？有什么隐藏的线索吗？

我曾经听说过一种技术，他们使用 Flash（我认为）将自定义字体嵌入到网站上，然后用这种 Flash 替代品替换普通标题。

除了flash还有哪些方式？

【问题讨论】：

这个问题应该在超级用户上
超级用户在以编程方式更改文本可视化方面没有任何共同之处
@Chris 用户不想知道如何在网页中开发平滑的标题...
我相信 Chris 的意思是 doctype.com :)

标签： html css fonts webfonts

【解决方案1】：

假设您不想使用图像作为文本替换，有几种技术可以以非常不显眼的方式调整字体增强：

使用闪存 - SIFR
纯css = @font-face 并直接在ttf 或otf 中嵌入字体
javascript增强技术，脚本名为Cufon

我个人喜欢将网络安全字体与鲜为人知的组合使用并做适当的后备

【讨论】：

+1 获取完整列表。我只使用过 sIFR，但有时设置起来有点麻烦。人们（至少在这里）似乎更喜欢cufon。
没错，sIFR 是该 Flash 实现的名称。非常感谢！
使用 cufon 的唯一缺点是很难找到适合中欧字符集编码的字体。而且准备好的字体脚本会变大
FWIW，有问题的网站正在使用图片。这是最古老的方式（因此也是最容易接受的方式）。 CSS font-face 方法可能是最现代的方法。
@Juraj 在 smasingmagazine.com 上有很多带有欧洲字符的字体集合：smashingmagazine.com/2009/06/05/…（请参阅底部的其他条目）

【解决方案2】：

他们只是将图像用作某些事物的 CSS 背景，在这种情况下：

http://boagworld.com/wp-content/themes/BoagworldV2/images/logo.gif

你可以用一些图像和 css 做任何你想做的事情，比如：

#header { 背景：#FFFFFF url(myLogoImg.png) 中心不重复； }

【讨论】：

【解决方案3】：

如果您不想使用图像替换或 sIFR，但想要自定义字体，您应该查看 TypeKit - http://typekit.com/。他们允许您使用 font-family 直接从您的样式表中调用自定义字体（他们已授权给您），并使用嵌入在您页面上的 javascript 来提供来自其服务器的字体。我现在正在一个项目中使用他们的服务，到目前为止它似乎运作良好。他们还没有庞大的字体库，但它仍然比 Arial、Verdana、Georgia 和 Times New Roman 大。

【讨论】：

【解决方案4】：

我会为此推荐cufón。它不是 Flash (JavaScript)，非常容易设置，并且可以优雅地降级。

【讨论】：