Question

我有一个页面，必须使某些元素不超过某些宽度。

对于这种情况，我知道我可以使用任何等宽字体来实现这一点，这样从一个字符到下一个字符的水平“步幅”不会超过某个阈值。

我发现这远不足以强制执行此约束：

.someclass {
  font-family: monospace;
  font-width: 13px;
}

甚至更具体的内容，例如

.someclass {
  font-family: consolas, monaco, courier, monospace;
  font-width: 13px;
}

...因为符合此规范的字体宽度可能会有很大差异。（事实上，当我发现上述CSS在Chrome中产生令人满意的结果时我意识到了这一点，但在Firefox中完全不可接受，因为后者用来满足上述指令的字体比Chrome使用的字体宽得多。）< / p>

IOW，基本上，我想做的是：

.someclass {
  font-family: monospace;
  font-width: 8px;
}

AFAIK，这是不可能的。

还有其他方法可以使用CSS对字体宽度施加硬限制吗？

Answer 1

我认为你需要font-stretch：

/*global define, require */

define(function (require) {

    'use strict';

    var controllers = angular.module('app.controllers', []);

    controllers.controller('LoginCtrl', require('controllers/LoginCtrl'));

    return controllers;

});

font-stretch接受以下值之一：

.someclass {
  font-family: monospace;
  font-stretch: ultra-expanded;
}

请查看mdn

Answer 2

您将需要迭代字体大小，直到找到满足您的约束的字体大小。这是一行粗略的伪代码：

function adjust_font_size(elt, start_size) {
    while (elt.scrollWidth > elt.offsetWidth) {     // doesn't fit
        elt.style.fontSize = --start_size + "px";   // reduce font size
    }
}

Answer 3

据我所知，没有办法强迫这种约束。确切的宽度在很大程度上取决于您的用户代理是什么以及您正在使用什么设备。

如何按宽度指定字体大小？

3 个答案: