商用フォントをWebサイトに埋め込む
-
05-07-2019 - |
質問
こんばんは!
商用フォントを埋め込むためのクロスブラウザソリューションの検索 HelveticaNeueやUniversなど。有望なアプローチを見つけました。
まず、ここで見つけた、モダンで使いやすいアプローチをすべて紹介します:
- sIFR
- Cufó n
- typeface.js
- CSS3 font-face
sIFRはよく知られており、簡単に実装できますが、私が知っているように、 Javascriptのみの兄弟であるCufó nとtypface.jsなので簡単です。
Cufó nは、少し良くなったので、私の注意を引きました typeface.jsよりも小さいサイズのフォントファイルを作成します。どうやら 市販のフォントで使用する合法的な方法はありません。 この種のソリューションに組み込むことはできません。
typeface.jsについても同じ状況が適用されますが、 実際、ライセンスを使用してフォントを変換することさえできません。 ウェブサイトに埋め込むことを禁止しています。
最後になりましたが、font-faceと呼ばれるこの「新しい」CSSプロパティがあります。 これは信じられないほど使いやすいですが、私たちの愛するIEのために変換する必要があります ファイルをEOT(Embedable OpenType)ファイルに変換します。
したがって、特別なCSS宣言がIEに必要です。 ブラウザ内でこれらのフォントを使用します。
質問は次のとおりです。
このような商用フォントをWebサイトで使用する最善の方法は何ですか? Cufó nで無料フォントのみを使用するか、使用済みのすべてのフォントをEOTに変換します ファイル、およびそれらをfont-faceと共に使用しますか?
よく議論された答えをありがとう、感謝します!
解決
最後に数時間の調査とテストの後、私は非常に ウェブサイトに特別なフォントを埋め込むための素晴らしいソリューション。
CSS3 font-faceを介したアプローチを使用するのが、私見の最良のソリューションです。
IEで行う必要がある唯一のオーバーヘッドは、変換することです Truetypeフォント(残念ながらOTFは機能していません) EOTファイル。 Microsoft WEFTはソリューションですが、最良の方法です これを行うには、オープンソースのツール「ttf2eot」を使用します。 ここにあります: http://code.google.com/p/ttf2eot/
ウェブベースのフロントエンドは、Googleで「Kirsle Wizards」を検索しています。
注目すべき唯一のことはブラウザのサポートです...
IE4,5,6,7,8はEOTファイルを使用しますが、TTFサポートは Firefoxバージョン> = 3.1で提供されます。 SafariとOperaについて よくわかりませんが、Safari 4は私のために働き、Opera 10も働きました。
(つまり、Chromeはそれをサポートしていません。 古いWebkitバージョン?!)
代理店のクライアントの追跡統計に基づく「のみ」 訪問者の15〜20%は、以下のような互換性のないブラウザを使用しています。 Firefox 2.0または3.0、古いSafariまたはOperaバージョン、またはChrome。
他のヒント
このページの下部には、ストレートHTMLとCSSを使用してそれを行う方法に関する情報があります。 http://www.albinoblacksheep.com/text/font