如何在网站使用中获得具有效果的非标准字体?

为了能够像其他文本一样显示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火狐:版本:3.5+
• 谷歌Chrome:4.249.4版+
• Apple Safari:3.1版+
• 歌剧: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);
}

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

去 http://www.fontsquirrel.com/fonts/TitilliumText 下载那里提供的@FONT face工具包。遵循安装和使用说明 @font-face 为您的网站。

接下来,对于外发光,可以使用 text-shadow 达到几乎相同的效果。例如,这将为您带来3倍的蓝色光芒:

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

你完了!当然,如上所述,IE8及以下不支持 文本阴影 所以你只能忍受。

你可以用

1. 发光字体 使用jquery插件 jQuery Text Glow Effect

2. 嵌入Titillium字体

   @字体{
   字体系列:Titillium;
   src:url(/location/of/font/titillium.ttf)格式(“truetype”);
   }

   /*然后像使用其他字体一样使用它*/
   .titillium字体系列:titillium,verdana,helvetica,sans-serif;
   }

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

我个人喜欢的一点是,对于那些使用JS的人,它可以按照您想要的方式优雅地降级。

我的建议:

• 在第一层(上面),使用带@FONT face的文本(在IE中使用eot文件,在其他浏览器中使用woff文件)
• 在第二层(下面)上使用 Cufon 发光颜色的文本-它将 将文本更改为画布
• 转换后,快速模糊生成的画布(例如 Pixastic library )

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

似乎很复杂,这是唯一的选择。(说实话,我喜欢@yi jiang的回答)。