文章/答案/技术大牛

发布

社区首页 >问答首页 >字体的数字"2“小于其余的数字。

问字体的数字"2“小于其余的数字。
EN

Stack Overflow用户

提问于 2022-08-03 12:43:28

回答 2查看 74关注 0票数 0

因此，我使用的字体称为“副翼”，我从这里下载。

CSS：

@font-face {
    font-family: 'Aileron SemiBold';
    src: url('./fonts/Aileron-SemiBold.otf');
}

body {
    font-family: 'Aileron SemiBold';
    font-size: 12px;
}

请参阅图片：数字"2“看起来比其余的数字要小。

这仅适用于字体的SemiBold变体和字体大小介于11.7px和12 of之间的情况。对于小于11.7px和大于12 it的大小，它工作得很好。

我尝试了“字体变体-数字”属性，但它不起作用。

fonts

font-face

font-size

html

css

回答 2

Stack Overflow用户

发布于 2022-08-03 19:38:20

我也遇到过类似的问题，字体比其他语言更小。我写了一些javascript代码，使这些字母的字体更小。因此，基于我的回答，我已经适应了(因为在您的例子中，您只关心字体大小在11.7px到12px之间的地方，我也使用了这个答案)。

function do_elem(elem) {

  function getStyle(el, styleProp) {
    var camelize = function(str) {
      return str.replace(/\-(\w)/g, function(str, letter) {
        return letter.toUpperCase();
      });
    };

    if (el.currentStyle) {
      return el.currentStyle[camelize(styleProp)];
    } else if (document.defaultView && document.defaultView.getComputedStyle) {
      return document.defaultView.getComputedStyle(el, null)
        .getPropertyValue(styleProp);
    } else {
      return el.style[camelize(styleProp)];
    }
  }


  function getFontSize(elem) {
    return parseFloat(getStyle(elem, 'font-size'));
  }


  function textNodesUnder(node) {
    var all = [];
    var font_size = getFontSize(node)
    for (node = node.firstChild; node; node = node.nextSibling) {
      if (node.nodeType == 3) {
        if (font_size >= 11.7 && font_size <= 12.0) {
          all.push(node);
        }
      } else {
        all = all.concat(textNodesUnder(node));
      }
    }
    return all;
  }

  function replace_node(node, str) {
    var replacementNode = document.createElement('span');
    replacementNode.innerHTML = str
    node.parentNode.insertBefore(replacementNode, node);
    node.parentNode.removeChild(node);
  }

  function decorate_english(str, cls) {
    var a = []
    for (var i = 0; i < str.length; i++) {
      var c = str.charAt(i);
      if (c == 2) {
        a.push("<span class=\"" + cls + "\">" + c + "</span>")
      } else {
        a.push(c)
      }
    }
    return a.join("")
  }

  function process_text_nodes(nodes) {
    for (var index = 0; index < nodes.length; index++) {
      var node = nodes[index];
      var value = node.nodeValue
      var str = decorate_english(value, "eng2")
      if (str != value) {
        replace_node(node, str)
      }
    }
  }

  var nodes = textNodesUnder(elem);
  process_text_nodes(nodes)
}


// fix smaller letter "2"
do_elem(document.body);

body {
  font-size: 16px
}

.eng2 {
  font-size: 120%;
  color: red;
}

.inner {
  font-size: 11.9px
}

<body>
  0123456789
  <div style="font-size:11.8px">
    0123456789
  </div>
  <div style="font-size:12.8px">0123456789
    <div class="inner">0123456789</div>

  </div>
</body>

票数 0

Stack Overflow用户

发布于 2022-08-04 18:10:38

此问题与(基于cff的) opentype 暗示有关。

暗示将尝试将茎与当前像素网格相匹配。

不幸的是，这有时会导致奇怪的渲染。

作为解决办法，您可以使用像woff2这样的工具将otf转换为otf。

这通常会剥夺原来的cff暗示或将他们转换成真实类型的暗示指令(transfonter有几个提示选项)。

示例:未提示的woff2

@font-face {
    font-family: 'Aileron_not_hinted';
    src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


p{
    font-size:11.8px
}
.nothinted{
    font-family:'Aileron_not_hinted'; 
    font-weight: 600;
}

    <p>not hinted: <span class="nothinted">0123456789</span></p>

预期结果

这种转换的另一个好处是更小的文件大小，因为woff2更高级的文件压缩。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73221969

复制

相似问题

问字体的数字"2“小于其余的数字。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字体的数字"2“小于其余的数字。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字体的数字"2“小于其余的数字。
EN