个人中心
gpt4 book ai didi

html - css 字体大小和行高与基线不匹配

转载 作者：行者123 更新时间：2023-11-28 02:16:28 27 4
gpt4 key购买 nike

我正在尝试做一些应该非常简单的事情，但我在失败和论坛之间度过了我的一天..

我想调整我的字体以匹配我的基线。 在 indesign 上它是一次点击，但在 css 中它看起来像是世界上最困难的事情..

让我们举一个有理数的简单例子。

titles on grid

在这张图片上，我每隔 20 像素就有一个基线。

所以对于我的 <body>我这样做:

<style>
body {font-size:16px; line-height:20px;}
</style>

一切正常。我的段落与基线相符。

但是当我编写我的 <h> 脚本时那不再符合基线了..我做错了什么？那应该遵循我的基线，不是吗？ 

<style type="text/css">
    body{font-size: 16px; line-height: 20px;}
    h1{font-size: 5em; line-height: 1.25em;}
    h2{font-size: 4em; line-height: 1.25em;}
    h3{font-size: 3em; line-height: 1.25em;}
    h4{font-size: 2em; line-height: 1.25em;}
</style>

ps: 20/16=1.25em

在我的检查器中，计算返回预期值

h1{font-size: 84px; line-height: 100px;}
h2{font-size: 68px; line-height: 80px;}
h3{font-size: 52px; line-height: 60px;}
h4{font-size: 36px; line-height: 40px;}

所以应该显示类似这样的东西不是吗？ enter image description here

最佳答案

这有点复杂 - 你必须先测量字体(就像 InDesign 所做的那样)并计算“行高”，你称之为“bottom_gap”的东西和其他一些东西

I'm pretty sure we can do something in JavaScript..

你是对的——但对于排版，JS 用于计算 CSS(取决于字体指标)

在这里演示了第一步(测量字体) https://codepen.io/sebilasse/pen/gPBQqm它只是以图形方式显示 [对于技术背景] 测量的内容

这种测量是必要的，因为每种字体在“行”中的表现完全不同。

这里有一个生成器可以生成这样的 Typo CSS:

https://codepen.io/sebilasse/pen/BdaPzN

要测量的函数可以基于 <canvas>看起来像这样:

function getMetrics(fontName, fontSize) {
  // NOTE: if there is no getComputedStyle, this library won't work.
  if(!document.defaultView.getComputedStyle) {
    throw("ERROR: 'document.defaultView.getComputedStyle' not found. This library only works in browsers that can report computed CSS values.");
  }
  if (!document.querySelector('canvas')) {
    var _canvas = document.createElement('canvas');
    _canvas.width = 220; _canvas.height = 220;
    document.body.appendChild(_canvas);
  }
  // Store the old text metrics function on the Canvas2D prototype
  CanvasRenderingContext2D.prototype.measureTextWidth = CanvasRenderingContext2D.prototype.measureText;
  /**
   *  Shortcut function for getting computed CSS values
   */
  var getCSSValue = function(element, property) {
    return document.defaultView.getComputedStyle(element,null).getPropertyValue(property);
  };
  /**
   * The new text metrics function
   */
  CanvasRenderingContext2D.prototype.measureText = function(textstring) {
    var metrics = this.measureTextWidth(textstring),
        fontFamily = getCSSValue(this.canvas,"font-family"),
        fontSize = getCSSValue(this.canvas,"font-size").replace("px",""),
        isSpace = !(/\S/.test(textstring));
        metrics.fontsize = fontSize;

    // For text lead values, we meaure a multiline text container.
    var leadDiv = document.createElement("div");
    leadDiv.style.position = "absolute";
    leadDiv.style.margin = 0;
    leadDiv.style.padding = 0;
    leadDiv.style.opacity = 0;
    leadDiv.style.font = fontSize + "px " + fontFamily;
    leadDiv.innerHTML = textstring + "<br/>" + textstring;
    document.body.appendChild(leadDiv);
    // Make some initial guess at the text leading (using the standard TeX ratio)
    metrics.leading = 1.2 * fontSize;
    // Try to get the real value from the browser
    var leadDivHeight = getCSSValue(leadDiv,"height");
    leadDivHeight = leadDivHeight.replace("px","");
    if (leadDivHeight >= fontSize * 2) { metrics.leading = (leadDivHeight/2) | 0; }
    document.body.removeChild(leadDiv);
    // if we're not dealing with white space, we can compute metrics
    if (!isSpace) {
        // Have characters, so measure the text
        var canvas = document.createElement("canvas");
        var padding = 100;
        canvas.width = metrics.width + padding;
        canvas.height = 3*fontSize;
        canvas.style.opacity = 1;
        canvas.style.fontFamily = fontFamily;
        canvas.style.fontSize = fontSize;
        var ctx = canvas.getContext("2d");
        ctx.font = fontSize + "px " + fontFamily;

        var w = canvas.width,
            h = canvas.height,
            baseline = h/2;

        // Set all canvas pixeldata values to 255, with all the content
        // data being 0. This lets us scan for data[i] != 255.
        ctx.fillStyle = "white";
        ctx.fillRect(-1, -1, w+2, h+2);
        ctx.fillStyle = "black";
        ctx.fillText(textstring, padding/2, baseline);
        var pixelData = ctx.getImageData(0, 0, w, h).data;

        // canvas pixel data is w*4 by h*4, because R, G, B and A are separate,
        // consecutive values in the array, rather than stored as 32 bit ints.
        var i = 0,
            w4 = w * 4,
            len = pixelData.length;

        // Finding the ascent uses a normal, forward scanline
        while (++i < len && pixelData[i] === 255) {}
        var ascent = (i/w4)|0;

        // Finding the descent uses a reverse scanline
        i = len - 1;
        while (--i > 0 && pixelData[i] === 255) {}
        var descent = (i/w4)|0;

        // find the min-x coordinate
        for(i = 0; i<len && pixelData[i] === 255; ) {
          i += w4;
          if(i>=len) { i = (i-len) + 4; }}
        var minx = ((i%w4)/4) | 0;

        // find the max-x coordinate
        var step = 1;
        for(i = len-3; i>=0 && pixelData[i] === 255; ) {
          i -= w4;
          if(i<0) { i = (len - 3) - (step++)*4; }}
        var maxx = ((i%w4)/4) + 1 | 0;

        // set font metrics
        metrics.ascent = (baseline - ascent);
        metrics.descent = (descent - baseline);
        metrics.bounds = { minx: minx - (padding/2),
                           maxx: maxx - (padding/2),
                           miny: 0,
                           maxy: descent-ascent };
        metrics.height = 1+(descent - ascent);
    } else {
        // Only whitespace, so we can't measure the text
        metrics.ascent = 0;
        metrics.descent = 0;
        metrics.bounds = { minx: 0,
                           maxx: metrics.width, // Best guess
                           miny: 0,
                           maxy: 0 };
        metrics.height = 0;
    }
    return metrics;
  };

注意您还需要一个好的“reset.css”来重置浏览器边距和填充。
你点击“show CSS”，你也可以使用生成的CSS来混合多种字体:
如果它们有不同的基本大小，则将第二个标准化:

var factor = CSS1baseSize / CSS2baseSize;

现在用 CSS2 重新计算每个字体

var size = size * factor;

请参阅 https://codepen.io/sebilasse/pen/oENGev?editors=1100 中的演示

如果涉及图像怎么办？下面的演示使用两种具有相同指标的字体加上一个额外的 JS 部分。需要计算基线网格的图像等媒体元素: https://codepen.io/sebilasse/pen/ddopBj

关于html - css 字体大小和行高与基线不匹配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48451054/

27 4 0
文章推荐： javascript - 窗口选择对象可以失效吗？
文章推荐： javascript - CoffeeScript - 空间问题
文章推荐： javascript - 解析特定格式的字符串
文章推荐： javascript - jQuery 二次方程
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com