jQuery 动态和按比例调整字体大小

【问题标题】：jQuery dynamically and proportionally resize fontsjQuery 动态和按比例调整字体大小
【发布时间】：2013-12-06 20:36:15
【问题描述】：

我想让 jQuery 调整页面上的字体大小，但要与分配了特定类 (.resizeFont) 的所有元素成比例地这样做。假设我希望大小加倍。

css 链接到主 html:

#titleText {
    font-size:50px;
}
#mainText {
    font-size:20px;
}
#footnoteText {
    font-size:8px;
}

主html：

<div id='#titleText'></div>
<div id='#mainText'></div>
<div id='#footnoteText'></div>

在外部 html 文件中（每一行在单独的文件中）：

<p class='someClass'>some text</p> // title.html

<p class='resizeFont'>some text</p> // main.html

<p class='resizeFont'>some text</p> // footnote.html

jQuery 完成后，#mainText 和 #footnoteText 的字体大小应分别为 40px 和 16px，但 #titleText 应保持 50px 大小

这里的方法是什么，我是否必须让 jQuery 构建一个所有元素的数组，并分配 .resizeFont 并通过数学乘数进行处理？

...我正在通过 ajax 加载文本，不确定这是否会影响字体属性的读取/写入方式

$.ajax({
   success : function (data) {
        $('#titleText').load('title.html');
        $('#mainText').load('main.html');
        $('#footnoteText').load('footnote.html');
   },
});

【问题讨论】：

标签： jquery css font-size

【解决方案1】：

只需在一些percent 值中设置font-size 属性，就像，

table{ font-size:50% }

使用jQuery 你可以这样做，

$('table').css('font-size', '100%')

或者

$('table').css('font-size', '70%')

或单独为td

$("td.tablecol_0").animate({ 
    'width' : (xWidth * (15 / 100)) + 'px',
    'minWidth' : (xWidth * (15 / 100)) + 'px',
    'maxWidth' : (xWidth * (15 / 100)) + 'px',
    'fontSize' : (xWidth * (15 / 100)) + '%'
}, 1000);

如果您为所有tds 设置100%，那么您可以简单地使用$(table).css('fontSize', '100%')。

DEMO.

http://jsfiddle.net/2xx6F/3/

【讨论】：