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

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

P.S.字体：Titillium。

来源

2010-09-26 daGrevis

为了能够像任何其他文本一样显示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+
谷歌浏览器：

而且字体嵌入在以下浏览器支持版本4.249.4+
苹果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); 
}

来源

2010-09-26 11:53:42

可以使用

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

@字体面{
FONT-FAMILY：Titillium;
src：url（/location/of/font/Titillium.ttf）格式（“truetype”）;
}

/*然后使用它像你将任何其他字体*/
.Titillium {FONT-FAMILY：Titillium，宋体，黑体，无衬线;
}

来源

2010-09-26 11:12:27

那么它很简单，如果你可以选择不支持IE8及以下辉光一部分。

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

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

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

大功告成！当然，如上所述，IE8及以下版本不支持text-shadow，所以你只需要忍受这一点。

来源

2010-09-26 11:16:49

使用，使焕发更强使用一个以上的影子：'文本-shadow：0 0 3px＃7FDEFF，0 0 3px＃7FDEFF，0 0 3px＃7FDEFF;' – pepkin88 2010-09-26 11:24:25

+1，IE不值得支持 – user187291 2010-09-26 11:25:57

他的所有用户都会在他们的机器上获得这种字体是方式吗？ – 2010-09-26 11:33:31

尝试的Cufón http://github.com/sorccu/cufon/wiki/usage

东西我个人很喜欢这个就是它优雅降级为那些与你所希望的方式JS禁用。

来源

2010-09-26 11:17:29

我的命题：

（以上）使用具有@字体面（在IE中使用EOT文件，在其他浏览器WOFF文件）
在第二层上的文字（下面）使用Cufon文本光晕颜色 - 它会改变文本以帆布
改造后只快速模糊产生的画布（例如，通过 Pixastic library）

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

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

来源

2010-09-26 11:18:48 pepkin88

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

回答

相关问题