可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm trying to use Myriad Pro as my primary font with Arial and such as a fall-back like so:

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

I want to change the font-size when Arial or Helvetica are selected. This is what I have in jQuery but it does not work:

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

I appreciate your time, help and generosity :)

回答1:

JavaScript doesn't have an officially supported way of detecting fonts, but this library is a decent workaround: http://www.lalit.org/lab/javascript-css-font-detect

Using this detector, you can then use:

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

Also note that you should only change the font-size property. If you change the font property, you overwrite both your font size and your font families.

回答2:

Everything I've read on this page so far terrifies me! I'm concerned about flickering text sizes, strange browser behavior, misalignment all over the place due to race conditions with other sizing of elements based on sizes.

The underlying problem is that different fonts have different sizes even for the same point size - so you need to understand how different fonts behave to see if they're within acceptable tolerances.

i came up with the followig quick and dirty font tester. Just stick it at the top of your webpage inside the <BODY> tag and click a font name to switch to that font. Test it on Mac + PC + iPad and whichever browsers you need to support. Just remove the fonts from your font list that dramatically break your design.

Remember if you have portions of your page that are more critical, try using Arial for those sections.

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

Test it out on JSFiddle.com <-- click on the red font names in the bottom right box

回答3:

a very simple jquery function :

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

sample :

changeFont("body", "B Koodak, B Nazanin, Tahoma", "13pt");

回答4:

You can't detect what font is used to render the text. The style is not changed according to what fonts are available.

What you could do is to measure the size of an element that contains text, and from that decuce what font might be used to render the text.

(Consider also that the user setting for font size also may affect how it's rendered.)

回答5:

My solution is along the lines of what @Guffa suggests, but I would create a couple of different, maybe even hidden if that works in all browsers, containers with the same text. Use classes to set the font to the different combinations -- one with, one without Myriad Pro. Compare the heights of these two containers. If they are the same, then you know it's being rendered with the fallback fonts. In Safari 4, I get 16 and 15, respectively.

Example:

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

回答6:

The example from tvanfosson actually works. You'll need to use width instead of height though to compare the fonts. You'll also want to make the second font of the font list arial (or whatever fall back font you want to use). After that simply compare the widths, and if they are the same, you'll know that it's using arial in both cases:

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

I use this to optionally load a different style sheet that will use a different font size if segoe is not available. Reason being that segoe UI is too small at 11px and the other two fonts are too big at 12px. Since Segoe UI and Lucida Grande have better legibility, I try to use these first. By comparing them to arial, I know whether they are present on the system, thanks to tvanfosson.

回答7:

if($("body").css("font-family").indexOf("Arial") > -1 
   || $("body").css("font-family").indexOf("Helvetica") > -1) {
   $("body").css("font-size", "12px");
}

This works perfectly. I don't know why the guy who posted it chose to delete it..

Edit: NickFitz is correct as it indeed does not work. Silly me, got excited and overlooked the wrong changes it was making.