1


1

Webサイトの使用で効果のある非標準フォントを取得する方法は?

問題は、Webサイトで(Photoshop:Outer Glowから)効果のある非標準フォント(誰もがコンピューターに持っているわけではない)を取得する必要があることです。 Javascript(jQueryを含む)とCSS3を使用できますが、そのフォントはWebのテキストのように強調表示できるはずです。 解決策はありますか?

P.S. フォント:Titillium。

5 Answer


4


グロー部分でIE8以下をサポートしないことを選択できる場合、それは十分に単純です。

http://www.fontsquirrel.com/fonts/TitilliumTextにアクセスし、そこにある@ font-faceキットをダウンロードします。 ウェブサイトに `@ font-face`をインストールして使用する方法の指示に従ってください。

次に、外側の輝きについては、 `text-shadow`プロパティを使用してほぼ同じ効果を達成できます。 これにより、たとえば、サイズが3pxの青い輝きが得られます。

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

そしてこれで終わりです! もちろん、上記で述べたように、IE8以下は「text-shadow」をサポートしていないため、そのまま使用する必要があります。


3


他のテキストのようにTitilliumフォントを表示できるようにするには、Webページにフォントを埋め込む必要があります。 あなたがそれをするのを助けることができる多くのオンラインサービスがあります。 埋め込む前に、許可されていないフォントが少ないため、フォントのライセンスでフォントを埋め込むことができることを確認してください。

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;
}

上記のように、私が書いた同じフォントのさまざまなフォーマットがあります。 ブラウザ互換性のためにあります。例:eotはInternet Explorerでサポートされています。 WOFFはまもなくすべてのブラウザで広く受け入れられる形式です。 フォントを変換するために利用できる多くのオンラインコンバーターがあります。 あなたはそれをグーグルアウトすることができますあなたのために最高のものを選択してください。

また、次のブラウザではフォントの埋め込みがサポートされています。

  • Mozilla Firefox:バージョン:3.5+

  • Google Chrome:バージョン4.249.4+

  • Apple Safari:バージョン3.1+

  • Opera:バージョン10.5+

  • Microsoft Internet Explorer:バージョン4+

これが私がいつもプロジェクトで使用しているグロー効果です:)

  • HTML *

Hello World
  • 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);
}


0


あなたが使用することができます

  1. 輝くフォントはjqueryプラグインを使用します jQuery Text Glow Effect

  2. Titilliumフォントの埋め込み + @ font-face \ {+ font-family:Titillium; + src:url(/location/of/font/Titillium.ttf)format( "truetype"); +} + / その後、他のフォントと同じように使用します /
    .Titillium \{ font-family: Titillium , verdana, helvetica, sans-serif;
    }


0


Cufonを試すhttp://github.com/sorccu/cufon/wiki/usage

私が個人的にこの点で気に入っているのは、あなたが望む方法でjsが無効になっている人のために優雅にダウングレードすることです。


0


私の命題:

  • 最初のレイヤー(上記)で@ font-faceのテキストを使用(EOTファイルを使用) IE、他のブラウザーのWOFFファイル)

  • 2番目のレイヤー(下)で使用 Cufonグローの色のテキスト-テキストをキャンバスに変更します

  • 変換後、生成されたキャンバスを高速でぼかします(例: by Pixasticライブラリ

2番目と3番目のポイントは、輝くテキストの画像を置くことで置き換えることができます(動的に生成できます。 PHPによる)。

複雑に思えますが、それは唯一の代替手段です。 (正直、@ Yi Jiangの答えが好きです)。