使用 jQuery 基于 Font-Family 更改正文字体大小
Posted
技术标签:
【中文标题】使用 jQuery 基于 Font-Family 更改正文字体大小【英文标题】：Changing Body Font-Size based on Font-Family with jQuery 【发布时间】：2010-11-19 06:42:21 【问题描述】：我正在尝试使用 Myriad Pro 作为 Arial 的主要字体，例如像这样的后备字体：
font: 13px "Myriad Pro", "Helvetica", "Arial", "sans-serif";
我想在选择 Arial 或 Helvetica 时更改字体大小。这是我在 jQuery 中所拥有的，但它不起作用：
$(function()
if ($("body").css("font") == "Arial")
$("body").css("font", "10px");
;
);
感谢您的时间、帮助和慷慨 :)
【问题讨论】：
【参考方案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 属性，则会同时覆盖字体大小和字体系列。
【讨论】：
我也会调查一下，谢谢！【参考方案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
【讨论】：
【参考方案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");
【讨论】：
【参考方案4】：您无法检测用于呈现文本的字体。样式不会根据可用的字体而改变。
您可以做的是测量包含文本的元素的大小，并从中推断出可用于呈现文本的字体。
（还要考虑字体大小的用户设置也可能会影响它的呈现方式。）
【讨论】：
【参考方案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>
【讨论】：
【参考方案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。
【讨论】：
【参考方案7】：if($("body").css("font-family").indexOf("Arial") > -1
|| $("body").css("font-family").indexOf("Helvetica") > -1)
$("body").css("font-size", "12px");
这非常有效。我不知道为什么发帖的人选择删除它..
编辑：NickFitz 是正确的，因为它确实不起作用。愚蠢的我，很兴奋，却忽略了它所做的错误改变。
【讨论】：
我在想 indexOf 将其视为一个数组，从而找到匹配的结果？但是 "> -1" 部分呢？ 我认为他删除了它，因为它不起作用。由于您的字体系列字符串同时包含 Arial 和 Helvetica，因此 indexOf 将始终返回 > -1 的值，并且您的字体大小将始终设置为 12px。在您的示例页面上，将字体大小设置为 CSS 中的 24px 之类的愚蠢的东西，然后看到此函数将其重置为 12px。或者，它仅适用于您正在测试的浏览器，但我认为它不适用于 any 浏览器。 "indexOf" 是一个字符串方法，记录在许多地方，例如developer.mozilla.org/en/Core_JavaScript_1.5_Reference/…以上是关于使用 jQuery 基于 Font-Family 更改正文字体大小的主要内容，如果未能解决你的问题，请参考以下文章