我正在尝试使用 Myriad Pro 作为 Arial 的主要字体，例如像这样的后备字体：
font: 13px "Myriad Pro", "Helvetica", "Arial", "sans-serif";
我想在选择 Arial 或 Helvetica 时更改字体大小。这是我在 jQuery 中所拥有的，但它不起作用：
$(function(){
if ($("body").css("font") == "Arial") {
$("body").css("font", "10px");
};
});
感谢您的时间、帮助和慷慨 :)
【问题讨论】：
标签： jquery css fonts font-size
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 属性，则会同时覆盖字体大小和字体系列。
【讨论】：
到目前为止，我在此页面上阅读的所有内容都让我感到恐惧！我担心闪烁的文本大小、奇怪的浏览器行为、由于与基于大小的其他元素大小的竞争条件而导致的整个地方的错位。
潜在的问题是即使对于相同的磅值，不同的字体也有不同的大小 - 因此您需要了解不同字体的行为，以确定它们是否在可接受的公差范围内。
我想出了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>
【讨论】：
一个非常简单的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");
【讨论】：
您无法检测用于呈现文本的字体。样式不会根据可用的字体而改变。
您可以做的是测量包含文本的元素的大小，并从中推断出可用于呈现文本的字体。
（还要考虑字体大小的用户设置也可能会影响它的呈现方式。）
【讨论】：
我的解决方案与@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>
【讨论】：
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。
【讨论】：
if($("body").css("font-family").indexOf("Arial") > -1
|| $("body").css("font-family").indexOf("Helvetica") > -1) {
$("body").css("font-size", "12px");
}
这非常有效。我不知道为什么发帖的人选择删除它..
编辑：NickFitz 是正确的，因为它确实不起作用。愚蠢的我，很兴奋，却忽略了它所做的错误改变。
【讨论】：