在 css/js 中为字体设置不同的宽度和高度

Set different width and height to font in css/js

本文关键字：高度 设置 css js 字体      更新时间：2023-09-26

我正在寻找一种根据视口宽度和高度分别设置不同宽度和高度的方法。在 css 或 js 中可能吗？

对于 JS 解决方案，您可以使用 FlowType.js 库。

它将允许您快速轻松地控制页面上相对于其包含div 的大小的文本元素。

您的示例可以像这样设置：

$(document).ready(function(){
    // customize the options you pass into the
    // flowtype function in order to get the effects you want
    $('.text_block').flowtype({
     minimum   : 500,
     maximum   : 1200,
     minFont   : 12,
     maxFont   : 40,
     fontRatio : 30
    });
    
});

此示例使用 jQuery 来确保仅在加载页面后分配通过流类型的所有赋值。

要激活流类型，您只需将此调用放在结束<body>标记之前：

<script> $('.text_block').flowtype(); </script>

有关如何安装流类型以及如何配置流类型的详细信息，请参阅 flowtype.js 网站。

下面是一个 jsfiddle 显示您的示例以及流类型库赋值。

希望这有帮助！

相关文章：