如何在使用网站时获得非标准字体？ [英] How to get non-standard font with effect in use of web site?

问题描述

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

字体：Titillium。

解决方案

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

这是一个字体的例子使用CSS3嵌入：

  @ font-face {
 font-family：'Titillium'; 
 src：url（'Titillium.eot'）; 
 src：local（'Titillium'），url（'Titillium.ttf'）格式（'truetype'），url（'Titillium.woff'）格式（'woff'），url（'Titillium.svg' ）格式（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
 
 code 
 
 
 $ b 
正如你在上面看到的，我已经放入了不同格式的相同字体。他们在那里是浏览器兼容的，例如：eot由Internet Explorer支持。 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）; 
} 
  
 
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.
解决方案
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);
}


                        
这篇关于如何在使用网站时获得非标准字体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！