使用jQuery更改基于Font-Family的Body字体大小
我正在尝试使用Myriad Pro作为Arial的主要字体，例如像这样的后退：
font: 13px "Myriad Pro", "Helvetica", "Arial", "sans-serif"; 我想在选择Arial或Helvetica时更改字体大小。 这是我在jQuery中所拥有的，但它不起作用：
$(function(){ if ($("body").css("font") == "Arial") { $("body").css("font", "10px"); }; });
我感谢你的时间，帮助和慷慨:)
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快速和脏字体测试仪。 只需将其粘贴在标记内的网页顶部，然后单击字体名称即可切换到该字体。 在Mac + PC + iPad以及您需要支持的任何浏览器上进行测试。 只需删除字体列表中的字体，这会严重破坏您的设计。
请记住，如果您的页面部分更重要，请尝试在这些部分使用Arial。
- Segoe UI Medium
- Segoe UI
- Trebuchet MS
- Trebuchet
- Lucida Grande
- Tahoma
- Arial
- Sans-Serif
在JSFiddle.com上测试 < - 单击右下方框中的红色字体名称
一个非常简单的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。
例：
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus et tortor rhoncus ultricies.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus et tortor rhoncus ultricies.
tvanfosson的例子确实有效。 您需要使用宽度而不是高度来比较字体。 您还需要将字体列表的第二种字体设置为arial（或者您想要使用的任何后备字体）。 之后只需比较宽度，如果它们相同，你就会知道它在两种情况下都使用arial：
我使用它来选择加载一个不同的样式表，如果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是正确的，因为它确实不起作用。 愚蠢的我，很兴奋，忽视了它正在做出的错误改变。