如何让非标准字体在网站使用中发挥作用？

发布于 2024-09-25 10:00:59 字数 166 浏览 3 评论 0原文

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

PS 字体：Titilium。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

傲娇萝莉攻 2024-10-02 10:00:59

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

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

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

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

您就完成了！当然，如上所述，IE8 及更低版本不支持 text-shadow，因此您只能忍受这一点。

Well it's simple enough, if you can choose not to support IE8 and below for the glow part.

Go to http://www.fontsquirrel.com/fonts/TitilliumText and download the @font-face kit that's provided there. Follow the instruction on how to install and use @font-face for your website.

Next, for outer glow, you can use the text-shadow property to achieve pretty much the same effect. This, for instance, will get you a blue glow of size 3px:

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

And you're done! Of course, as stated above, IE8 and below don't support text-shadow, so you'll just have to live with that.

回复收藏 0 原文

若无相欠,怎会相见 2024-10-02 10:00:59

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

下面是使用 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+
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);
}

To be able to display Titillium font like anyother text, you need to embed the font in the webpage. There are many online services that can help you do that.
Before embedding make sure that the license of the font allows you to embed the font, as few font doesn't allow.

Here is an example for font embedding using 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;
}

As you see above there are various formats of same fonts I have put. They are there to be browser compatible eg: eot is supported by Internet Explorer. WOFF is a format soon to be widely accepted by all the browsers.
There are many online converter available for converting a font. You can google it out choose a best one for yourself.

Also font embedding is supported in following browsers:

Mozilla Firefox: version: 3.5+
Google Chrome: version 4.249.4+
Apple Safari: version 3.1+
Opera: version 10.5+
Microsoft Internet Explorer: version 4+

Here is the glow effect I always use in my projects :)

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);
}

回复收藏 0 原文

櫻之舞 2024-10-02 10:00:59

你可以使用

发光字体
使用jquery插件 jQuery 文本发光效果
嵌入Titilium字体
@font-face {
字体系列： Titilium ；
src: url( /location/of/font/Titillium.ttf ) format("truetype");
}
/* 然后像使用任何其他字体一样使用它 */
.Titillium { 字体系列：Titillium 、 verdana 、 helvetica 、 sans-serif ；
}