使用 jQuery 根据 Font-Family 更改正文字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1271477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing Body Font-Size based on Font-Family with jQuery
提问by MrSplashyPants
I'm trying to use Myriad Pro as my primary font with Arial and such as a fall-back like so:
我正在尝试使用 Myriad Pro 作为 Arial 的主要字体，例如像这样的后备字体：
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:
我想在选择 Arial 或 Helvetica 时更改字体大小。这是我在 jQuery 中所拥有的，但它不起作用：
$(function(){
if ($("body").css("font") == "Arial") {
$("body").css("font", "10px");
};
});
I appreciate your time, help and generosity :)
我感谢您的时间、帮助和慷慨:)
回答by Ron DeVera
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
JavaScript 没有官方支持的字体检测方式，但这个库是一个不错的解决方法：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-sizeproperty. If you change the fontproperty, you overwrite both your font size and your font families.
另请注意，您应该只更改font-size属性。如果更改该font属性，则会覆盖字体大小和字体系列。
回答by Simon_Weaver
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.
我想出了followig快速而肮脏的字体测试器。只需将其粘贴在网页顶部的<BODY>标签内，然后单击字体名称即可切换到该字体。在 Mac + PC + iPad 以及您需要支持的任何浏览器上进行测试。只需从您的字体列表中删除会严重破坏您的设计的字体。
Remember if you have portions of your page that are more critical, try using Arial for those sections.
请记住，如果您的页面中有更重要的部分，请尝试对这些部分使用 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<-- click on the red font names in the bottom right box
在 JSFiddle.com 上进行测试<-- 单击右下框中的红色字体名称
回答by Bahman.Akbarzade
a very simple jquery function :
一个非常简单的jquery函数：
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");
回答by Bahman.Akbarzade
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:
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>
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.
我使用它来选择性地加载一个不同的样式表，如果 segoe 不可用，它将使用不同的字体大小。原因是 segoe UI 在 11px 时太小，而其他两种字体在 12px 时太大。由于 Segoe UI 和 Lucida Grande 具有更好的易读性，我尝试先使用它们。通过将它们与 arial 进行比较，我知道系统中是否存在它们，这要感谢 tvanfosson。
回答by Guffa
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.)
（还要考虑字体大小的用户设置也可能影响它的呈现方式。）
回答by tvanfosson
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.
我的解决方案与@Guffa 建议的一致，但我会创建一些不同的，如果在所有浏览器中都有效，甚至可能隐藏，具有相同文本的容器。使用类将字体设置为不同的组合——一种有，一种没有 Myriad Pro。比较这两个容器的高度。如果它们相同，那么您就知道它是使用后备字体呈现的。在 Safari 4 中，我分别得到 16 和 15。
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>
回答by MrSplashyPants
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.
编辑：NickFitz 是正确的，因为它确实不起作用。愚蠢的我，兴奋并忽略了它正在做出的错误改变。
