12

一部のフォントは、CSS のイタリックまたはボールドをサポートしていません (たとえば、 Zapfinoはすでにかなりスクリプトのように見えるため、イタリックをサポートしていません)。エディターでスタイル ボタンを無効にできるように、フォント スタイルがサポートされていないことを検出したいと考えています。

私はこのようなことを試しました:

that.checkFontData = function( fontList )
{   var test = $("<span style='font-size:24px;absolute;visibility:hidden;height:auto;width:auto;white-space:nowrap;'>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910</span>");
    $('body').append( test );
    for (var i= 0, iMax = fontList.length; i < iMax; ++i)
    {   test.css( 'fontFamily', fontList[i] );
        var normalWidth = test.outerWidth( true );
        var normalHeight = test.outerHeight( true );
        test.css( 'fontStyle', 'italic' );
        var italicWidth = test.outerWidth( true );
        var italicHeight = test.outerHeight( true );
        test.css( 'fontStyle', 'normal' );
        test.css( 'fontWeight', 'bold' );
        var boldWidth = test.outerWidth( true );
        var boldHeight = test.outerHeight( true );
        console.log( fontList[i]  + ", normal: " + normalWidth + ", bold: " + boldWidth + ", italic: " + italicWidth  );
    }
    test.remove( );
};

しかし、それは機能しません...イタリックまたは太字を提供する多くのフォントは、同じ幅を報告します。

次に、canvas 要素でこれを検出することを考えましたが、残念ながら、firefox はキャンバスにイタリック体のテキストをレンダリングすることさえできないため、その考えは台無しになります。

何を提案しますか？

4

3 に答える 3

4

太字と斜体のサポートを検出するには、テキストを画像に変換して比較します。

それを行う方法は次のとおりです。

  1. 以下を参照してcanvasください（DOMに追加する必要はありません）
  2. にテキストを描画するcanvas
  3. キャンバスを画像に変換します（ここでは を使用しますpng）
  4. 画像の base64 文字列を比較します

についてcanvas：

次に、canvas 要素でこれを検出することを考えましたが、残念ながら、firefox はキャンバスにイタリック体のテキストをレンダリングすることさえできないため、その考えは台無しになります。

ネイティブの斜体フォントが存在しないため、特定のフォントが Firefox のキャンバスで斜体になりません。他のブラウザーは、フォントを疑似斜体化 (傾斜) しようとします。

jsFiddle で表示(このデモでは、Google フォントもテストしますSnowburst One)

function detectBoldItalic(fonts) {
    // Create canvas
    var canvas = document.createElement('canvas');
    canvas.width = 1000;
    canvas.height = 30;
    var context = canvas.getContext("2d");
    var test = {}, results = {};
    // Default
    context.font = "normal 16px a base case font";
    context.fillText("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910", 10, 20);
    var standard = canvas.toDataURL("image/png");
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);
    // Start test
    for (var i = 0; i < fonts.length; i++) {
        var styles = ["normal", "bold", "italic"];
        test[fonts[i]] = {};
        results[fonts[i]] = {};
        for (var j = 0; j < styles.length; j++) {
            // Draw text in canvas
            context.font = styles[j] + " 16px " + fonts[i];
            context.fillText("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910", 10, 20);
            // Convert canvas to png
            test[fonts[i]][styles[j]] = canvas.toDataURL("image/png");
            // Clear canvas
            context.setTransform(1, 0, 0, 1, 0, 0);
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
        if (test[fonts[i]]["normal"] !== standard) {
            results[fonts[i]]["bold"] = test[fonts[i]]["normal"] !== test[fonts[i]]["bold"] ? true:false; // Support bold
            results[fonts[i]]["italic"] = test[fonts[i]]["normal"] !== test[fonts[i]]["italic"] ? true:false; // Support italic
        } else {
            results[fonts[i]] = false; // Font does not exist
        }
    }
    return results;
}
console.log(detectBoldItalic(["Arial","Zapfino"]));
于 2013-02-27T17:44:58.170 に答える
1

コードを jsFiddle でテストしましたが、 や のような自然な Web フォントのサイズは異なりますが、 Georgia( Googlefont)Arialのような外部から読み込まれたフォントの サイズは異なります。Snowburst One

スクリプトの JS フィドル

いくつかの調査の結果、@font-faceロードされたフォントには css フォント変換が適用されないことがわかりました。バリエーションをロードして、次の@font-faceように適用します。

body { font-family:"DroidSerifRegular", Georgia, serif; }
h1 {
    font-family:"DroidSerifBold", Georgia, serif;
    font-weight:normal;
}
em {
    font-family:"DroidSerifItalic", Georgia, serif;
    font-weight:normal;
    font-style:normal;
}
strong em {
    font-family:"DroidSerifBoldItalic", Georgia, serif;
    font-weight:normal;
    font-style:normal;
}

上記の例のようにバリエーションのあるフォントを使用している場合@font-face、何らかの命名規則を考え出すことができるかもしれません。次に、代替フォントと比較して幅を確認することで、これらのフォントが存在するかどうかを確認できます。

test.css('fontFamily', 'sans-serif');
var defaultWidth = test.outerWidth( true );

for (var i= 0, iMax = fontList.length; i < iMax; ++i)
{   test.css( 'fontFamily', fontList[i] + ', sans-serif' );

    var normalWidth = test.outerWidth( true );
    var normalHeight = test.outerHeight( true );
    test.css( 'fontFamily', fontList[i] + 'Italic, sans-serif' );
    var italicWidth = test.outerWidth( true );
    var italicHeight = test.outerHeight( true );
    test.css( 'fontFamily', fontList[i] + 'Bold, sans-serif' );
    var boldWidth = test.outerWidth( true );
    var boldHeight = test.outerHeight( true );
    console.log( "default: "+ defaultWidth + ", " fontList[i]  + ", normal: " + normalWidth + ", bold: " + boldWidth + ", italic: " + italicWidth  );
}

スタイル付きバージョンの幅がデフォルトと比べて変更されている場合、それは「ビンゴ」です!

注: すべての文字の幅が常に同じであるため、これは等幅フォントでは機能しません。

于 2013-02-15T15:38:27.247 に答える
0

Font.js を使用すると、計算のためのフォント メトリックへのアクセスがより信頼できる場合があります。http://pomax.nihongoresources.com/pages/Font.js

于 2013-02-11T16:30:53.550 に答える