Question

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

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

我想在选择Arial或Helvetica时更改字体大小。这就是我在jQuery中所拥有的，但它不起作用：

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

感谢您的时间，帮助和慷慨：）

Answer 1

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属性，则会覆盖字体大小和字体系列。

Answer 2

到目前为止，我在此页面上阅读的所有内容都让我感到害怕！我担心闪烁的文字大小，奇怪的浏览器行为，由于竞争条件以及基于尺寸的其他元素大小而在整个地方不对齐。

潜在的问题是，即使是相同的磅值，不同的字体也会有不同的大小 - 因此您需要了解不同字体的行为方式，以确定它们是否在可接受的容差范围内。

我想出了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>

Test it out on JSFiddle.com＆lt; - 点击右下方框中的红色字体名称

Answer 3

一个非常简单的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");

Answer 4

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

你可以做的是测量包含文本的元素的大小，从中可以看出可以使用什么字体来呈现文本。

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

Answer 5

我的解决方案与@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>

Answer 6

tvanfosson的例子确实有效。你需要使用宽度而不是高度来比较字体。您还需要将字体列表的第二种字体设置为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时太小而另外两种字体在12px时太大了。由于Segoe UI和Lucida Grande具有更好的易读性，我尝试先使用它们。通过将它们与arial进行比较，我知道它们是否存在于系统中，这要归功于tvanfosson。

Answer 7

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

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

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

使用jQuery更改基于Font-Family的Body字体大小

7 个答案: