如何在网站使用中获得非标准字体的效果？答案

【问题标题】：How to get non-standard font with effect in use of web site?如何在网站使用中获得非标准字体的效果？
【发布时间】：2010-09-26 23:21:46
【问题描述】：

问题是，我需要在网站上获得具有效果（来自 Photoshop：Outer Glow）的非标准字体（不是每个人的电脑上都有）。我可以使用 Javascript（包括 jQuery）和 CSS3，但该字体应该能够像 web 中的任何文本一样突出显示。有什么解决办法吗？

附：字体：Titillium。

【问题讨论】：

标签： javascript fonts css

【解决方案1】：

那很简单，如果你可以选择不支持 IE8 及以下的发光部分。

转到http://www.fontsquirrel.com/fonts/TitilliumText 并下载那里提供的@font-face 工具包。按照有关如何为您的网站安装和使用@font-face 的说明进行操作。

接下来，对于外发光，您可以使用text-shadow 属性来实现几乎相同的效果。例如，这将为您提供 3px 大小的蓝光：

text-shadow: 0 0 3px #7FDEFF;

你就完成了！当然，如上所述，IE8 及以下不支持text-shadow，所以你只需要忍受它。

【讨论】：

使用多个阴影使辉光更强烈：text-shadow: 0 0 3px #7FDEFF, 0 0 3px #7FDEFF, 0 0 3px #7FDEFF;
他的所有用户都会以这种方式在他们的机器上获得这种字体吗？
@stereofrog IE6、7 和 8 将至少占人口的一半。

【解决方案2】：

为了能够像显示任何其他文本一样显示 Titillium 字体，您需要在网页中嵌入该字体。有许多在线服务可以帮助您做到这一点。在嵌入之前，请确保字体的许可证允许您嵌入字体，因为很少有字体不允许。

这是一个使用 CSS3 嵌入字体的示例：

@font-face{
    font-family: 'Titillium';
    src: url('Titillium.eot');
    src: local('Titillium'), url('Titillium.ttf') format('truetype'), url('Titillium.woff') format('woff'), url('Titillium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

正如您在上面看到的，我已经放置了各种格式的相同字体。它们与浏览器兼容，例如：Internet Explorer 支持 eot。 WOFF 是一种很快就会被所有浏览器广泛接受的格式。有许多在线转换器可用于转换字体。你可以google一下，自己选一个最好的。

以下浏览器也支持字体嵌入：

Mozilla Firefox：版本：3.5+
谷歌浏览器：版本 4.249.4+
Apple Safari：版本 3.1+
Opera：版本 10.5+
Microsoft Internet Explorer：版本 4+

这是我在项目中经常使用的发光效果 :)

HTML

<span id="glow">Hello World</span>

CSS

#glow{
    font-weight:bold;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0.6), 0 0 10px rgba(73, 167, 219, 0.5), 0 0 30px rgba(92, 214, 255, 0.7), 0 0 75px rgba(92, 214, 255, 0.8);
}

【讨论】：

【解决方案3】：

你可以使用

发光字体使用jquery插件jQuery Text Glow Effect
嵌入Titillium字体

@font-face {
字体系列：Titillium ;
src: url( /location/of/font/Titillium.ttf ) 格式("truetype");
}

/* 然后像使用其他字体一样使用它 */
.Titillium { 字体系列：Titillium ，verdana，helvetica，无衬线；
}

【讨论】：

【解决方案4】：

试试 Cufon http://github.com/sorccu/cufon/wiki/usage

我个人喜欢这个的一点是，它可以为那些以你想要的方式禁用 js 的人优雅地降级。

【讨论】：

【解决方案5】：

我的提议：

在第一层（上图）使用带有@font-face 的文本（在 IE 中使用 EOT 文件，在其他浏览器中使用 WOFF 文件）
在第二层（下）使用发光颜色的Cufon 文本 - 它会将文本更改为画布
转换后快速模糊生成的画布（例如通过 Pixastic library)

第二点和第三点可以通过放置发光文本的图像来代替（可以动态生成，例如通过PHP）。

看起来很复杂，这是唯一的选择。（老实说，我喜欢@Yijiang的回答）。

【讨论】：