Question

问题是，我需要在网站上获得非标准字体（不是每个人都在他的计算机上都有它）（来自Photoshop：Outer Glow）。我可以使用Javascript（包括jQuery）和CSS3，但该字体应该能够像web中的任何文本一样突出显示。任何解决方案？

P.S。字体：Titillium。

Answer 1

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

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

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

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

你已经完成了！当然，如上所述，IE8及以下版本不支持text-shadow，因此您只需要使用它。

Answer 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是一种很快被所有浏览器广泛接受的格式。有许多在线转换器可用于转换字体。你可以谷歌出去为自己选择一个最好的。

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

Mozilla Firefox：版本：3.5 +
Google Chrome：版本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);
}

Answer 3

你可以使用

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

@ font-face {
font-family：Titillium;
src：url（/location/of/font/Titillium.ttf）格式（“truetype”）;
}

/ *然后像使用任何其他字体一样使用它* / .Titillium {font-family：Titillium，verdana，helvetica，sans-serif;
}

Answer 4

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

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

Answer 5

我的主张：

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

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

似乎很复杂，它是唯一的选择。（老实说，我喜欢@Yi Jiang的回答）。

如何在使用网站时获得非标准字体效果？

5 个答案: