根据字数设置字体大小

在我的小型Quotes on Design项目中，有些报价比其他报价更长。 我认为增加短引号的字体大小并减小长引号的大小可能是很不错的选择，因此它们在屏幕上所占的大小都匹配得更好。

我不是使用每个引号中的硬编码数字来执行此操作，而是使用JavaScript来执行此操作。 这样可以轻松地进行调整，并很好地将内容和演示文稿分开。

计划

• 设置您要定位的段落的对象
• 将段落分成单词数组，在每个空格处中断
• 计算数组的长度
• 根据该计数设置字体大小。

用MooTools来做

window.addEvent('domready',function() {
	
	$quote = $$('.post p')[0];
    
        var $numWords = $quote.get('text').split(' ').length; 
    
        if (($numWords >= 1) && ($numWords < 10)) {
                $quote.setStyle('font-size','36px');
        }
        else if (($numWords >= 10) && ($numWords < 20)) {
                $quote.setStyle('font-size','32px');
        }
        else if (($numWords >= 20) && ($numWords < 30)) {
                $quote.setStyle('font-size','28px');
        }
        else if (($numWords >= 30) && ($numWords < 40)) {
                $quote.setStyle('font-size','24px');
            }
        else {
                $quote.setStyle('font-size','20px');
        };
});

用jQuery做到这一点

$(function() {

    var $quote = $(".post p:first");
    
    var $numWords = $quote.text().split(" ").length;
    
    if (($numWords >= 1) && ($numWords < 10)) {
        $quote.css("font-size", "36px");
    }
    else if (($numWords >= 10) && ($numWords < 20)) {
        $quote.css("font-size", "32px");
    }
    else if (($numWords >= 20) && ($numWords < 30)) {
        $quote.css("font-size", "28px");
    }
    else if (($numWords >= 30) && ($numWords < 40)) {
        $quote.css("font-size", "24px");
    }
    else {
        $quote.css("font-size", "20px");
    }    
	
});

例子

Quotes on Design使用的是jQuery版本。 这里的 MooTools 示例 （请注意代码中的一些细微更改，以在一页上容纳两个引号）。 这是我第一次真正使用MooTools。 我很高兴了解更多。 我显然在这里以jQuery为中心，但是绝对不是唯一的障碍。 谢谢@mootools ！

翻译自: https://css-tricks.com/set-font-size-based-on-word-count/