10

Myriad Pro を Arial のプライマリ フォントとして使用しようとしていますが、次のようにフォールバックします。

font: 13px "Myriad Pro", "Helvetica", "Arial", "sans-serif";

Arial や Helvetica を選択したときの font-size を変更したいです。これは私がjQueryに持っているものですが、機能しません:

$(function(){
  if ($("body").css("font") == "Arial") {
    $("body").css("font", "10px");
};
});

あなたの時間、助け、寛大さに感謝します:)

4

7 に答える 7

9

JavaScript には公式にサポートされているフォントを検出する方法がありませんが、このライブラリは適切な回避策です: http://www.lalit.org/lab/javascript-css-font-detect

この検出器を使用すると、次を使用できます。

$(function(){
  var fontDetector = new Detector();
  if(fontDetector.test('Arial')){
    $('body').css('font-size', '10px');
  }
});

font-sizeまた、プロパティのみを変更する必要があることに注意してください。プロパティを変更するfontと、フォント サイズとフォント ファミリの両方が上書きされます。

于 2009-08-13T11:58:20.640 に答える
4

これまでにこのページで読んだことはすべて、私を恐怖に陥れます! テキスト サイズのちらつき、ブラウザの奇妙な動作、サイズに基づく他の要素のサイズ設定との競合状態によるあちこちの位置ずれが心配です。

根底にある問題は、フォントが異なれば、同じポイント サイズでもサイズが異なることです。そのため、フォントが許容範囲内にあるかどうかを確認するには、フォントがどのように動作するかを理解する必要があります。

私は次の迅速で汚いフォントテスターを思いつきました。タグ内のウェブページの上部に貼り付け<BODY>、フォント名をクリックしてそのフォントに切り替えます。Mac + PC + iPad、およびサポートが必要なブラウザでテストしてください。デザインを著しく損なうフォントをフォント リストから削除するだけです。

ページに重要な部分がある場合は、それらのセクションに Arial を使用してみてください。

<ul id="fontList" style="position:absolute; top: 500px; color: red">
    <li>Segoe UI Medium</li>
    <li>Segoe UI</li>
    <li>Trebuchet MS</li>
    <li>Trebuchet</li>
    <li>Lucida Grande</li>
    <li>Tahoma</li>
    <li>Arial</li>
    <li>Sans-Serif</li>
</ul>


<script>
    $('#fontList li').assertNonEmpty().click(function () {
        $('body').css('font-family', $(this).html());
    });
</script>

JSFiddle.com でテストしてみてください <-- 右下のボックスにある赤いフォント名をクリックします

于 2011-02-03T23:17:14.590 に答える
2

非常に単純な jquery 関数:

function changeFont(element, fontFamily, fontSize)
{
    var hh = $(element).height();
    $(element).css("font-family", fontFamily);
    if ($(element).height() != hh)
        $(element).css("font-size", fontSize);
}

サンプル ：

changeFont("body", "B Koodak, B Nazanin, Tahoma", "13pt");
于 2011-01-14T17:33:52.490 に答える
1

tvanfosson の例は実際に機能します。ただし、フォントを比較するには、高さではなく幅を使用する必要があります。また、フォント リストの 2 番目のフォントを arial (または使用したい代替フォント) にすることもできます。その後、単に幅を比較し、それらが同じ場合は、両方のケースで arial を使用していることがわかります。

<style type="text/css">
    .segoeUI
    {
        font: 13px "Segoe UI" , "Arial", "sans-serif";
        display: none;
    }
    .lucidaGrande
    {
        font: 13px "Lucida Grande" , "Arial", "sans-serif";
        display: none;
    }
    .arial
    {
        font: 13px "Arial" , "sans-serif";
        display: none;
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        var sWidth = $('.segoeUI').width();
        var aWidth = $('.arial').width();
        var lWidth = $('.lucidaGrande').width();

        alert('Segoe: ' + sWidth + ' Arial: ' + aWidth + ' Lucida: ' + lWidth);
    });
</script>

これを使用して、segoe が利用できない場合に別のフォント サイズを使用する別のスタイル シートをオプションでロードします。理由は、segoe UI が 11px では小さすぎ、他の 2 つのフォントが 12px では大きすぎるためです。Segoe UI と Lucida Grande の方が読みやすいので、まずはそちらを使ってみます。それらを arial と比較することで、tvanfosson のおかげでそれらがシステム上に存在するかどうかがわかります。

于 2009-09-29T19:42:22.333 に答える
1

テキストのレンダリングに使用されているフォントを検出できません。使用可能なフォントによってスタイルが変更されることはありません。

あなたができることは、テキストを含む要素のサイズを測定し、その結果から、テキストのレンダリングに使用されるフォントを決定することです。

(フォント サイズのユーザー設定も、レンダリング方法に影響する可能性があることを考慮してください。)

于 2009-08-13T11:49:28.883 に答える
1

私の解決策は@Guffaが提案するものに沿っていますが、同じテキストを持つすべてのブラウザーで機能する場合は、いくつかの異なる、おそらく非表示のコンテナーを作成します。クラスを使用して、フォントをさまざまな組み合わせ (Myriad Pro を含むものと含まないもの) に設定します。これら 2 つのコンテナーの高さを比較します。それらが同じであれば、フォールバック フォントでレンダリングされていることがわかります。Safari 4 では、それぞれ 16 と 15 になります。

例：

<style type="text/css">
    .myriad {
        font: 13px "Myriad Pro", "Helvetica", "Arial", "sans-serif";
            display: none;
    }
    .arial {
        font: 13px "Arial", "sans-serif";
            display: none;
    }
</style>
<script type="text/javascript" language="javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var mHeight = $('.myriad').height();
    var aHeight = $('.arial').height();

    alert( 'M: ' + mHeight + ' ' + 'A: ' + aHeight );
});
</script>

<p class="myriad">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla non purus et tortor rhoncus ultricies.
</p>
<p class="arial">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla non purus et tortor rhoncus ultricies.
</p>
于 2009-08-13T11:58:08.880 に答える