javascript - 遅い - フォント自動判定




Webページで使用されているフォントの定義 (8)

@pat実際には、Safariは使用されているフォントを提供しません。Safariは、少なくとも私の経験では、インストールされているかどうかにかかわらず、スタックの最初のフォントを常に返します。

font-family: "my fake font", helvetica, san-serif;

Helveticaがインストール/使用されていると仮定すると、次のようになります。

  • Safariの「私の偽のフォント」(そして私は他のウェブキットブラウザも信じている)。
  • GeckoブラウザとIEの "私の偽フォント、helvetica、san-serif"。
  • Opera 9では "helvetica"ですが、Opera 10ではこれをGeckoと一致するように変更しています。

私はこの問題にパスし、 Font Unstack を作成し ました 。これはスタック内の各フォントをテストし、最初にインストールされたフォントだけを返します。 @MojoFilterが言及しているトリックを使用しますが、複数がインストールされている場合には最初のものだけを返します。 @tlrobinsonが言及している弱点(WindowsはHelveticaの代わりにArialを代用し、Helveticaがインストールされていると報告する)に悩まされていますが、それ以外はうまくいきます。

自分のページに次のCSSルールがあるとします。

body {
    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

ユーザーのブラウザで定義されているフォントのどれが使用されているのかをどうやって確認できますか?

検出したフォントに他のフォントでは使用できないグリフが含まれている場合や、ユーザーがそのフォントを持っていない場合は、そのフォントをダウンロードするように要求するリンクを表示したい私のWebアプリケーションを正しいフォントで使用できます。

現在私はすべてのユーザーのためにダウンロードフォントリンクを表示しています、私は正しいフォントがインストールされていない人々のためにこれを表示したいです。


CalibriはMicrosoftが所有するフォントです。無料で配布しないでください。 また、ユーザーに特定のフォントをダウンロードするように要求することは、あまりユーザーフレンドリーではありません。

フォントのライセンスを購入してそれをアプリケーションに埋め込むことをお勧めします。



うまくいくテクニックは、要素の計算されたスタイルを見ることです。 これはOperaとFirefoxでサポートされています(そして私はsafariで偵察しますが、テストはしていません)。 IE(少なくとも7)はスタイルを取得するためのメソッドを提供しますが、それはスタイルシートにあったもので、計算されたスタイルではないもののようです。 quirksmodeの詳細: スタイルの取得

これは、要素で使用されているフォントを取得するための簡単な関数です。

/**
 * Get the font used for a given element
 * @argument {HTMLElement} the element to check font for
 * @returns {string} The name of the used font or null if font could not be detected
 */
function getFontForElement(ele) {
    if (ele.currentStyle) { // sort of, but not really, works in IE
        return ele.currentStyle["fontFamily"];
    } else if (document.defaultView) { // works in Opera and FF
        return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
    } else {
        return null;
    }
}

これに対するCSSの規則が

#fonttester {
    font-family: sans-serif, arial, helvetica;
}

それから、インストールされていればhelvetica、そうでなければarial、そして最後にシステムのデフォルトのsans-serifフォントの名前を返すべきです。 CSS宣言内のフォントの順序は重要です。

あなたが試してみることができる面白いハックは、どのフォントがマシンにインストールされているか検出しようとするためにたくさんの異なるフォントでたくさんの隠された要素を作成することです。 誰かがこのテクニックを使って気の利いたフォント統計収集ページを作ることができると確信しています。


別の解決策は @font-face を介してフォントを自動的にインストールすることです。これは検出の必要性を否定するかもしれません。

@font-face { 
font-family: "Calibri"; 
src: url("http://www.yourwebsite.com/fonts/Calibri.eot"); 
src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype");
}

もちろん、著作権の問題は解決されませんが、フリーウェアフォントを使用することも、独自のフォントを作成することもできます。 うまく機能するには、 .eot ファイルと .ttf ファイルの両方が必要です。


私はFountを使っています。 あなたは単にあなたのブックマークバーにFountボタンをドラッグし、それをクリックしてからWebサイト上の特定のテキストをクリックする必要があります。 そのテキストのフォントが表示されます。

https://fount.artequalswork.com/


簡単な解決策があります - element.style.font 使うだけです:

function getUserBrowsersFont() {
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;
}

この機能は正確にあなたが望むことをするでしょう。 実行時それはユーザ/ブラウザのフォントタイプを返します。 これが役立つことを願っています。


簡略化した形式は次のとおりです。

function getFont() {
    return document.getElementById('header').style.font;
}

もっと完成度の高いものが必要なら、 this チェック this てください。





fonts