基于FONT-FAMILY使用jQuery更改车身FONT-SIZE(Changing Body F

我试图用无数Pro作为我的Arial和诸如像这样退一步的主要字体：

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

我想选择宋体或黑体当改变字体大小。这是我在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和浏览器无论您需要支持。只需从字体列表，极大地破坏你的设计中删除字体。

请记住，如果你有更重要的你的页面的部分，请尝试使用宋体的那些部分。

<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 < -在右下框点击红色字体名称

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:

你无法检测是做什么用的字体来呈现文本。风格是根据什么字体可用没有改变。

你可以做的是衡量包含文本元素的大小，并从decuce可能用什么字体来呈现文本。

（此外还应考虑到用户设定字体大小也可能会影响它的呈现方式。）

Answer 5:

我的解决办法是沿着什么@Guffa暗示的台词，但我会创造几个不同的，甚至隐若在所有浏览器上运行，使用相同的文字容器。使用类的字体设置为不同的组合 - 一个有，一个没有无数专业版。比较这两个容器的高度。如果它们是相同的，那么你知道它的渲染与后备字体。在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字体：

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

我使用它来选择性地加载如果濑越不可用，将使用不同的字体大小不同的样式表。原因是，濑越界面太小，在11像素和另外两个字体在12像素太大。由于濑越UI和很好的可读性有更好的可读性，我尝试使用这些第一。通过比较它们为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是正确的，因为它确实不起作用。我傻，很兴奋，但常被忽视它正在错误的变化。

文章来源: Changing Body Font-Size based on Font-Family with jQuery