blocks|key|1833480|text|好吧，这很简单，如果你可以选择不支持IE8和以下的发光部分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1833481|访问http://www.fontsquirrel.com/fonts/TitilliumText并下载那里提供的@font-face工具包。按照说明为您的网站安装和使用@font-face。|offset|length|style|CODE|1833482|接下来，对于外部发光，您可以使用text-shadow属性来实现几乎相同的效果。例如，这将使您获得大小为3px的蓝色发光：|1833483|text-shadow:+0+0+3px+#7FDEFF;|code-block|syntax|javascript|1833484|你就完事了！当然，如上所述，IE8及以下版本不支持text-shadow，因此您只能接受这一点。|1833485|entityMap|0|LINK|mutability|MUTABLE|url|http://www.fontsquirrel.com/fonts/TitilliumText^0|0|2D|A|2|1B|0|0|G|B|0|0|P|B|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@$D|12|E|13|1|14]]|A|$]]|$1|H|3|I|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|18|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|19|8|@$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

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

Go to <a href="http://www.fontsquirrel.com/fonts/TitilliumText" rel="nofollow">http://www.fontsquirrel.com/fonts/TitilliumText</a> and download the @font-face kit that's provided there. Follow the instruction on how to install and use <code>@font-face</code> for your website. 

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

<pre><code>text-shadow: 0 0 3px #7FDEFF;
</code></pre>

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

blocks|key|3142115|text|您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3142116|使用jquery插件jQuery+Text+Glow+Effect|offset|length|3142117|Embedding+|unordered-list-item|3142118|发光字体|ordered-list-item|3142119|3142120|3142121|@font-face+{|3142122|font-family:+Titillium；|3142123|src:+url(+/location/of/font/Titillium.ttf+)格式(“truetype”)；|3142124|}/*然后像使用任何其他字体一样使用它*/|3142125|.Titillium+{字体家族:+Titillium，verdana，helvetica，sans-serif；|3142126|}|3142127|entityMap|0|LINK|mutability|MUTABLE|url|http://www.jquery.wisdomplug.com/jquery-plugins/jquery-text-effects-plugins/jquery-text-glow-effect/^0|0|A|N|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@]|9|@$D|19|E|1A|1|1B]]|A|$]]|$1|F|3|G|5|H|7|1C|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|1D|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1G|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1H|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1I|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1J|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1K|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1L|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]]]

you can use

<ol>
<li>Glowing font 
use jquery plugin <a href="http://www.jquery.wisdomplug.com/jquery-plugins/jquery-text-effects-plugins/jquery-text-glow-effect/" rel="nofollow">jQuery Text Glow Effect</a></li>
<li>Embedding Titillium font

@font-face { 
 font-family: Titillium ; 
 src: url( /location/of/font/Titillium.ttf ) format("truetype"); 
} 

/* Then use it like you would any other font */ 
.Titillium { font-family: Titillium , verdana, helvetica, sans-serif; 
} </li>
</ol>

blocks|key|3142170|text|试试Cufon+http://github.com/sorccu/cufon/wiki/usage|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3142171|我个人喜欢的一点是，对于那些以你想要的方式禁用了js的人，它可以优雅地降级。|3142172|entityMap|0|LINK|mutability|MUTABLE|url|http://github.com/sorccu/cufon/wiki/usage^0|8|15|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Try Cufon
<a href="http://github.com/sorccu/cufon/wiki/usage" rel="nofollow">http://github.com/sorccu/cufon/wiki/usage</a>

Something that I personally like about this is that it downgrades gracefully for those with js disabled in the way you want.

blocks|key|3142213|text|我的建议是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3142214|第一层(上图)使用带有@-|3142215|的文本(+IE中使用EOT文件，其他浏览器中使用WOFF文件)第二层(下图)上的|unordered-list-item|3142216|使用发光颜色的Cufon文本-它会在转换后将文本更改为canvas+|offset|length|3142217|只需快速模糊生成的画布(例如，通过Pixastic+library)|3142218|3142219|第二点和第三点可以通过放置发光文本的图像来替换(可以动态生成，例如通过PHP)。|3142220|看起来很复杂，这是唯一的选择。(老实说，我喜欢@奕江的回答)。|3142221|entityMap|0|LINK|mutability|MUTABLE|url|http://cufon.shoqolate.com/generate/|1|http://www.pixastic.com/^0|0|0|0|7|5|0|0|H|G|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|14|8|@]|9|@$I|15|J|16|1|17]]|A|$]]|$1|K|3|L|5|F|7|18|8|@]|9|@$I|19|J|1A|1|1B]]|A|$]]|$1|M|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1D|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1E|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]|Z|$5|U|V|W|A|$X|10]]]]

My proposition:

<ul>
<li>on the first layer (above) use text with @font-face (use EOT file in IE, WOFF file in other browsers)</li>
<li>on the second layer (below) use <a href="http://cufon.shoqolate.com/generate/" rel="nofollow">Cufon</a> text in color of glow - it will
change text to canvas</li>
<li>after transformation just fast blur the generated canvas (e.g. by
<a href="http://www.pixastic.com/" rel="nofollow">Pixastic library</a>)</li>
</ul>

Second and third point can be replaced by putting image of glowing text (could be generated dynamicly, e.g. by PHP).

Seems complicated, it's only alternative. (Honestly, I like @Yi Jiang's answer).

Problem is, that I need to get non-standard font (not everyone has it on his computer) with effect (from Photoshop: Outer Glow) in web site. I can use Javascript (including jQuery) and CSS3 for it, but that font should be able to highlight like any text in web. Any solutions?

P.S. Font: Titillium.

How to get non-standard font with effect in use of web site?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

问题是，我需要得到非标准字体(不是每个人都有它在他的电脑上)的效果(从Photoshop:外部发光)在网站上。我可以使用Javascript (包括jQuery)和CSS3来处理它，但该字体应该能够像web中的任何文本一样突出显示。有什么解决方案吗？附言: Titillium。

问如何在网站使用中获得有效果的非标准字体？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在网站使用中获得有效果的非标准字体？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在网站使用中获得有效果的非标准字体？
EN