10

我正在尝试使用 Myriad Pro 作为 Arial 的主要字体，例如像这样的后备字体：

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

我想在选择 Arial 或 Helvetica 时更改字体大小。这是我在 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

到目前为止，我在此页面上阅读的所有内容都让我感到恐惧！我担心闪烁的文本大小、奇怪的浏览器行为、由于竞争条件以及基于大小的其他元素大小而导致的整个地方的错位。

潜在的问题是即使对于相同的磅值，不同的字体也有不同的大小 - 因此您需要了解不同字体的行为，以查看它们是否在可接受的公差范围内。

我想出了followig快速而肮脏的字体测试器。只需将其粘贴在<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

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.

于 2009-09-29T19:42:22.333 回答
1

您无法检测到用于呈现文本的字体。样式不会根据可用的字体而改变。

您可以做的是测量包含文本的元素的大小，并从中得出可用于呈现文本的字体。

（还要考虑字体大小的用户设置也可能影响它的呈现方式。）

于 2009-08-13T11:49:28.883 回答
1

我的解决方案与@Guffa 所建议的一致，但我会创建几个不同的，如果适用于所有浏览器，甚至是具有相同文本的容器，甚至可能隐藏。使用类将字体设置为不同的组合——一种有，一种没有 Myriad Pro。比较这两个容器的高度。如果它们相同，那么您就知道它是使用后备字体呈现的。在 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 回答
0 
if($("body").css("font-family").indexOf("Arial") > -1 
   || $("body").css("font-family").indexOf("Helvetica") > -1) {
   $("body").css("font-size", "12px");
}

这完美地工作。我不知道为什么发布它的人选择删除它..

编辑：NickFitz 是正确的，因为它确实不起作用。愚蠢的我，很兴奋，却忽略了它所做的错误改变。

于 2009-08-13T12:03:25.527 回答