根据字数设置字体大小

Avatar of Chris Coyier
Chris Coyier 于

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分！

在我的小型 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！

嘘！ 创建一个 DigitalOcean 账户并获得 200 美元的免费积分 用于基于云的托管和服务。

评论

  1. Oskar Krawczyk
    评论永久链接#

    PHP 变量，为什么？此外，您可以在 MooTools 中使用 $$(“.post p:first”)。

  2. Lewis Walsh
    评论永久链接#

    好主意。不过我想知道，当引言放入列表中时，是否使用您的计数方法来计算单词并将该数字存储起来会更谨慎。如果引言更新，只需再次使用代码来更新数字。

    这样，您只需运行一次计数代码，而不是每次刷新页面时都运行。

  3. David Walsh
    评论永久链接#

    很高兴在 CSS-Tricks 上看到一些 MooTools 的热爱！

  4. Brenelz
    评论永久链接#

    很巧妙的小技巧，Chris！

  5. cssProdigy
    评论永久链接#

    我不记得上次在 CSS Tricks 上看到 MooTools 是什么时候了。

  6. Bogdan
    评论永久链接#

    Chris，

    请求一个“Quotes on design”的返回按钮是否过分了？您可能会一遍又一遍地点击“另一个”，并且一旦看到一个很酷的引言，您不小心又点击了另一个，哎呀，您无法返回到之前的那个。

  7. polosatus
    评论永久链接#

    我不明白：为什么不使用 php 以及为什么计数单词而不是字符？有什么区别？

    • Paul Grill
      评论永久链接#

      我同意：在每次显示时都不会更改的引言中计数单词毫无意义，那么为什么不使用 php 进行计数并让 php 决定该做什么呢？

      <?php
function determineFontSize($quote) {
$numWords=str_word_count($quote);
if (($numWords >= 1) && ($numWords < 10)) {
return 36;
}elseif (($numWords >= 10) && ($numWords < 20)) {
return 32;
}elseif (($numWords >= 20) && ($numWords < 30)) {
return 28;
}elseif (($numWords >= 30) && ($numWords < 40)) {
return 24;
}else {
return 20;
}}
?>
    • dat_paulchen
      评论永久链接#

      哦，我的小代码段末尾缺少一个花括号

    • Nile
      评论永久链接#

      我会使用 strlen() 函数，并使用 switch(){ case : } 而不是 if。

  8. Aaron Newton
    评论永久链接#

    干得好！

    如果您真的想了解 MooTools 的工作原理（以及它与 jQuery 的不同之处——不一定是更好，但确实不同），您的代码应该是一个类。像这样

    var QuoteSizer = new Class({
    Implements: Options,
    options: {
        grid: {
            10: 36,
            20: 32,
            30: 28,
            40: 24
        },
        minimumSize: 20
    }
    initialize: function(element, options) {
        this.element = $(element);
        this.setOptions(options);
        var style = this.calculate(this.options.grid);
        this.style(style);
    },
    calculate: function(grid){
        var numWords = $(this).get('text').split(' ').length;
        var value;
        $each(grid, function(size, count){
            if (numWords < count) {
                sizeSet = size;
            }
        }, this);
        return value;
    },
    style: function(size) {
        $(this).setStyle('font-size', size || this.options.minimumSize);
    }
});

window.addEvent('domready',function() {
    new QuoteSizer($$('.post p')[0]);
});

    这样做很酷，因为如果您愿意，以后可以扩展它以获得更多功能

    var QuoteColors = new Class({
    Extends: QuoteSizer,
    options: {
        grid: {
            10: 'red',
            20: 'blue',
            30: 'green',
            40: 'yellow'
        },
        defaultColor: 'black'
    }
    style: function(color) {
        $(this).setStyle('color', color || this.options.defaultColor);
    }
});
    • Chris Coyier
      评论永久链接#

      哇，感谢您抽出时间提供帮助并使代码更智能，Aaron！

    • Aaron Newton
      评论永久链接#

      没问题！我喜欢看到人们学习这个库。将 jQuery 设计转换为 MooTools 设计非常容易（正如您发现的那样），但 MooTools 的真正魔力在于您学习 MooTools 设计时，这与 jQuery 的设计完全不同（再次强调，不同，不一定是更好）。

    • styx
      评论永久链接#

      根据我学到的和您展示的内容，似乎您编写了一个类似插件的东西。
      我的意思是，使用 jQuery 可以实现几乎相同的目标

      (function($){ 
    $.fn.quoteSizer = function(options) { 
        var settings = $.extend({
            grid: {10:36,20:32,30:28,40:24},
            minimumSize: 20
        }, options);
               [...code here...]
    };
})(jQuery);

      然后像这样调用脚本

      $('.post').quoteSizer();

      甚至可以使用以下方法扩展基本函数

      $.quoteSizer.extend()

      看起来差异不像您认为的那么大。

  9. Yael K. Miller
    评论永久链接#

    我是一个新手，有很多新手问题。

    您如何使用这段代码？它放在哪里？我可以在 WordPress 中使用它吗？如何在 WordPress 中使用它？

    通过 @andysowards 找到您。

    • Morgan Daly
      评论永久链接#

      我认为这是一个好问题。我的第一个想法是在 wordpress 中使用它。

  10. Vince
    评论永久链接#

    这太棒了！我希望我想到过这个！

  11. Elad
    评论永久链接#

    好主意，但我建议在计数单词之前添加一些 HTML 标签清除方法。

  12. Aaron Newton
    评论永久链接#

    像 这个？

  13. Sean McArthur
    评论永久链接#

    Aaron，你的类很不错。当我第一次阅读正在发生的事情时，我想到了另一种计算正确大小的方法。原始概念中有一个模式，每 10 个单词，字体大小降低 4。所以我写了一个简单的除法和乘法公式。我会对类进行的修改。

    options: {
    maxSize: 36,
    fontDiff:4,
    wordDiff:10,
    minSize: 20
}
calculate: function(grid){
    var numWords = $(this).get('text').split(' ').length;
    var wordDiff = this.options.wordDiff, fontDiff = this.options.fontDiff, minSize = this.options.minSize;

    var size = this.options.maxSize;
    size -= (numWords / wordDiff).toInt() * fontDiff;
    return (size > minSize ? size : minSize);
}

    当然，这提供了较少的控制，因为它需要一个模式。但它允许更容易地定义更大的范围，因此您不必为 10-100 个单词或任何其他单词提供值。 *耸肩*

    • Aaron Newton
      评论永久链接#

      Sean，你为什么总是要抢我的风头？为什么？

    • Aaron Newton
      评论永久链接#

      不过现在我仔细想想，你的版本不允许像我那样扩展它……

    • Sean McArthur
      评论永久链接#

      那是真的……虽然如果您想变得花哨，您可以扩展我所做的并使用模式重写计算函数并计算 rgb 值。我想不出一个快速的例子……

      虽然我确实承认我想到的函数依赖于一个模式，并且提供了较少的特定控制 :)

  14. philip
    评论永久链接#

    不错！不过您可以稍微简化一下代码（MooTools 版本）

    window.addEvent('domready',function() {

  $quote = $$('.post p')[0];

  var $numWords = $quote.get('text').split(' ').length; 
  var size = 20;

  if ($numWords >= 1 && $numWords < 10) {
    size = 36;
  }
  else if ($numWords >= 10 && $numWords < 20) {
    size = 32;
  }
  else if ($numWords >= 20 && $numWords < 30) {
    size = 28;
  }
  else if ($numWords >= 30 && $numWords < 40) {
    size = 24;
  }

  $quote.setStyle('font-size', size +'px');

});
  15. Jordan
    评论永久链接#

    不错的技巧。

    由于所有字体大小似乎始终为前一个的 88%，您可以设置一个默认大小（36px）和默认修改器（0.88），并且每 10 个单词，将默认大小乘以修改器^（$numWords / 10），而不是必须设置多个不同的 if/else 块。

    类似这样（不过经过了更多优化，当然）

    $fontSize = 36;
    $modifier = 0.88;
    $quotes.css("font-size", Math.min(Math.round($fontSize * (Math.pow($modifier, Math.round($numWords / 10)))), 20) + "px");

    基本上，你将单词数除以十（x），将修改因子提升到x的幂，对结果取整，再乘以默认字体大小，并对最终结果取整，最后为了保持最小尺寸为20px，使用min()函数。我敢肯定有一些晦涩的JavaScript函数可以在我写的代码一半的时间内完成所有这些操作，但我真的不知道是什么函数 :p

    不过，我不知道速度会怎么样。这可能是最大的缺点。我想你的if/else语句可能要快得多。但是，如果你决定更改任何内容，可能更容易更改默认大小和修改因子，而不是必须更改每个if块中的不同大小。

    或者也许我只是很奇怪，喜欢毫无理由地在等式中添加东西。完全有可能 :)

    • Jordan
      评论永久链接#

      哦，天哪，也许我应该在回复已经打开6个小时的标签页中的帖子之前先刷新一下……

  16. SpiderSavvy
    评论永久链接#

    这真的很酷。感谢分享！

  17. Jarrod
    评论永久链接#

    这让我想起了iPhone中基于应用程序文本数量调整文本字段大小的功能。我希望我能弄清楚如何根据字符数而不是单词数来实现。在移动应用程序中可能会很方便。尽管如此，它仍然很酷也很强大。

    • Sean McArthur
      评论永久链接#

      只需获取字符串的长度，而不是像他那样用空格分割它。

      $('#element').get('text').length

  18. Brian
    评论永久链接#

    很酷的概念。我喜欢它的实际用途。还有一点

    print("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');
    };

    });”);

    在这段代码中，你执行了一些不必要的计算。我会通过去除所有if语句中的第一个条件来优化它。（假设没有负数或非零的单词计数）当你遍历这些语句时，如果第二个条件为真，则第一个条件总是为真。

    print("window.addEvent('domready',function() {

    $quote = $$('.post p')[0];

    var $numWords = $quote.get('text').split(' ').length;

    if ($numWords < 10) {
    $quote.setStyle('font-size','36px');
    }
    else if ($numWords < 20) {
    $quote.setStyle('font-size','32px');
    }
    else if ($numWords < 30) {
    $quote.setStyle('font-size','28px');
    }
    else if ($numWords < 40) {
    $quote.setStyle('font-size','24px');
    }
    else {
    $quote.setStyle('font-size','20px');
    };

    });”);

    • Chris Coyier
      评论永久链接#

      我不认为这会起作用，Brian。以$numWords为“5”为例。它将满足所有四个第一个条件，最终将字体大小设置为24px，而你真正想要的是36px。也许你可以在其中添加某种“break”语句，但按照目前的写法，它看起来在逻辑上行不通。

    • Sean McArthur
      评论永久链接#

      实际上，它会以这种方式工作。因为他使用了else if子句。因此，只有当第一个条件为假时，才会评估第二个条件，依此类推。

  19. WPCult
    评论永久链接#

    这是一个很巧妙的小代码片段。

  20. Pliggs
    评论永久链接#

    我只是喜欢找到这些代码片段，好主意，感谢分享。

  21. Timothy
    评论永久链接#

    感谢MooTools的精彩内容！ :)

  22. Spencer
    评论永久链接#

    如果你要使用JavaScript，为什么不为引文设置一个高度，然后增加字体大小直到达到该高度呢？它足够快（不会被察觉），并且独立于字体系列、字体粗细、行高等等，并确保你想要填充的屏幕部分得到填充。

    Spencer

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。

© 2024 . All rights reserved.