如何在使用網站時獲得非標準字體？

問題是，我需要在網站中獲得非標準字體（並非每個人都在計算機上），並帶有效果（來自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

如何在使用網站時獲得非標準字體？

回答

相關問題