Safari 的 CSS 上升覆盖和下降覆盖解决方法

Question

我可以在一行上一起使用三种字体。（表情符号我用

<span>

包裹起来并设置表情符号字体系列，因为国际米兰有自己的一些字形字符，如心形。）我找到了国际米兰的上升/下降（上升：2728，下降：680）并设置

所有字体均使用 ascent-override

和

descent-override

，以便它们与 Inter 匹配。这样，如果在同一行上使用三种字体，它们的垂直布局是一致的，并且

background-color

（来自突出显示）是一致的。

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firacode/v22/uU9NCBsR6Z2vfE9aq3bh3dSDqFGedA.woff2) format('woff2');
  ascent-override: 100%;
  descent-override: 19.953%;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
  ascent-override: 100%;
  descent-override: 19.953%;
}

@font-face {
  font-family: Emoji;
  src:
    local("Apple Color Emoji"),
    local("Segoe UI Emoji"),
    local("NotoColorEmoji"),
    local("Noto Color Emoji"),
    local("Segoe UI Symbol"),
    local("Android Emoji"),
    local("EmojiSymbols");
  ascent-override: 100%;
  descent-override: 19.953%;
}

p {
  font-size: 100px;
}

.inter {
  font-family: Inter;
  background-color: tomato;
}

.fira-code {
  font-family: Fira Code;
  background-color: tomato;
}

.emoji {
  font-family: Emoji;
  background-color: tomato;
}

<p>
  <span class="emoji">👋</span><span class="inter"> foo</span><span class="fira-code">bar</span>
</p>

但 Safari 不支持

ascent-override

和

descent-override

（跟踪错误）。这导致 Safari 中出现一些不幸的布局错误。

铬：

野生动物园：

我有办法解决缺乏

ascent-override

/

descent-override

支持的问题吗？

例如，通过创建我自己的字体文件来设置正确的上升和下降值，以便它们即使在 Safari 中也保持一致。我知道我可以在 MacOS 上的

/System/Library/Fonts/Apple Color Emoji.ttc

找到 Apple 的彩色表情符号文件，但不知道如何修改该文件或 Fira 代码以获得我想要的结果。我对字体文件格式也不太了解，不知道是否可以进行这样的修改。

巧合的是，Apple Color Emoji 和 Fira Code 似乎具有相同的上升/下降比例，因此为了简化问题，我可以获取修改后的 Inter 文件。

Answer 1

一种方法是使用相对定位来调整行内元素的垂直对齐方式。我们可以计算出每种字体的上升部分和下降部分的高度，然后使用 CSS 来相应地定位它们。

以下是实施此解决方案的方法：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Alignment</title>
<style>
  p {
    font-size: 100px;
    position: relative; * Ensure relative positioning for child elements */
    line-height: 1; /* Reset line height */
  }

  .inter, .fira-code, .emoji {
    position: relative;
    display: inline-block; /* Ensure inline block for proper positioning */
  }

  .inter::before, .fira-code::before, .emoji::before {
    content: "";
    display: block;
    height: 0;
  }

  .inter::before {
    margin-top: -6px; /* Adjust based on ascent value of Inter */
  }

  .fira-code::before {
    margin-top: -6px; /* Adjust based on ascent value of Fira Code */
  }

  .emoji::before {
    margin-top: -6px; /* Adjust based on ascent value of Emoji */
  }
</style>
</head>
<body>
  <p>
    <span class="emoji">👋</span><span class="inter"> foo</span><span class="fira-code">bar</span>
  </p>
</body>
</html>

调整每种字体的margin-top值以匹配表情符号的间距、间距和升序值。

此解决方案应在不同字体之间提供一致的垂直对齐，而不依赖于特定于浏览器的功能，例如 ascent-override 和 descent-override。比直接修改字体文件更健壮，更容易维护。

Safari 的 CSS 上升覆盖和下降覆盖解决方法

问题描述投票：0回答：1

1个回答

最新问题

Safari 的 CSS 上升覆盖和下降覆盖解决方法

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1