Changing Body Font-Size based on Font-Family with

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

标签： jquery css fonts font-size

7条回答

smile是对你的礼貌

2楼-- · 2019-01-06 18:48

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>

0人赞添加讨论(0) 举报

Juvenile、少年°

3楼-- · 2019-01-06 18:51

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.

0人赞添加讨论(0) 举报

三岁会撩人

4楼-- · 2019-01-06 18:58

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");

0人赞添加讨论(0) 举报

放荡不羁爱自由

5楼-- · 2019-01-06 19:01

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

0人赞添加讨论(0) 举报

爱情/是我丢掉的垃圾

6楼-- · 2019-01-06 19:05

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

0人赞添加讨论(0) 举报

姐就是有狂的资本

7楼-- · 2019-01-06 19:06

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.

0人赞添加讨论(0) 举报

1 2 下一页

Changing Body Font-Size based on Font-Family with

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间