有关webfont的行高及其他使用问题 #7

lakejason0 · 2023-05-07T16:23:11Z

非常感谢您制作这样一款专注于标点符号的字体！我在下载时发现有woff2打包，便尝试将其用于网站：

@font-face {
    font-family: 'Zhudou Sans';
    src: local('Zhudou Sans'), url('/images/b/ba/ZhudouSansVF.woff2') format("woff2-variations");
    font-weight: 1 999;
}

/* ... */

body {
    font-family: "Zhudou Sans", 'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
}

但是这样除去VF的字重问题（我不太清楚可变字体如何使用），整个页面的行高都会变得异常高（经过Devtools发现使用的其实是电脑安装的煮豆黑体）。在CSS的line-height会影响绝大部分界面元素的情况下，整个页面排版会变得异常（尤其是Material icons这样行高本身就有点问题的字体，指定行高为normal后会使用煮豆黑体的行高，于是变得异常高）。我应该如何在网页环境下使用该字体呢？

The text was updated successfully, but these errors were encountered:

Buernia · 2023-05-07T17:11:45Z

网页可变字体的用法可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

本字体只有字重可变，字重值可以填写250—900之间的任意值，其中400相当于 Regular，700相当于 Bold。

其他问题有待尝试能否复现。

lakejason0 · 2023-05-08T00:04:27Z

我稍后给自己的网站加个样式，给html加class启用煮豆黑体吧。

https://lakeus.xyz

给<html>加.lakeus-zhudou-sans

至于ascent-override，好像标点位置也会有问题，不太适用吧。

lakejason0 · 2023-05-08T02:48:57Z

可以看到行高差距还是很大的（前无煮豆黑体，后有）：

@font-face {
    font-family: 'Zhudou Sans';
    src: url(/images/b/ba/ZhudouSansVF.woff2) format("woff2-variations"),local('Zhudou Sans');
    font-weight: 250 900;
}

html.lakeus-zhudou-sans {
    --font-family: 'Zhudou Sans','Roboto',-apple-system,blinkmacsystemfont,'Segoe UI','Oxygen','Ubuntu','Cantarell','Helvetica Neue',sans-serif /* This variable applies to font-family of <body> */
}

html.lakeus-zhudou-sans {
    font-weight: 400
}

注：一般的p标签的line-height是1.5，其他的为默认值。

CoelacanthusHex · 2023-10-16T14:04:34Z

本人于 Arch Linux 上的所有 Qt 程序的文本框中复现了该问题（使用非可变字体版本），只要文段中存在煮豆黑体的字符，皆会导致行高巨大。

无煮豆黑体时行高正常。
本人亦于 Firefox Nightly 浏览器中复现了题主所述在浏览器里的行高问题。

because it leads huge line gap Buernia/Zhudou-Sans#7

CoelacanthusHex · 2023-10-16T14:44:41Z

~~目前发现在 HTML 里只有 ul > li 会发生行高变化，且需要保证没有 line-height 属性固定行高。~~ 这是 MDN 自带的 CSS 的问题。

qyl27 · 2023-10-16T15:02:45Z

写了个最小复现样例，在 Chrome 117 成功复现，除了 pre 标签以外的多数 HTML 标签都会受到影响。

最小复现样例代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>Proof of Concept</title>
    <style>
        .custom-font {
            font-family: 'Zhudou Sans', sans-serif !important;
        }
    </style>
</head>
<body>
    <div>
        <div style="float: left;">
            <h1>行高测试！</h1>
            <p>
                你好，世界！<br />
                现在页面左右有完全相同（复制过去）的 Web 文档结构。<br />
                <a href="#">这是个不会跳转的 a 标签。</a> <br />
            </p>
            <h2>来点《归去来兮辞》？</h2>
            <pre>
            归去来兮，田园将芜胡不归？
            既自以心为形役，奚惆怅而独悲？
            悟已往之不谏，知来者之可追。
            实迷途其未远，觉今是而昨非。
        </pre>
            <span>
            ——陶渊明（东晋）
        </span>
            <ul>
                <li>无序列表项1</li>
                <li>无序列表项2</li>
                <li>无序列表项3</li>
                <li>无序列表项4</li>
            </ul>
            <table>
                <tr>
                    <th>列1</th>
                    <th>列2</th>
                </tr>
                <tr>
                    <td>单元格11</td>
                    <td>单元格12</td>
                </tr>
                <tr>
                    <td>单元格21</td>
                    <td>单元格22</td>
                </tr>
            </table>
        </div>

        <div style="float: right;" class="custom-font">
            <h1>行高测试！</h1>
            <p>
                你好，世界！<br />
                现在页面左右有完全相同（复制过去）的 Web 文档结构。<br />
                <a href="#">这是个不会跳转的 a 标签。</a> <br />
            </p>
            <h2>来点《归去来兮辞》？</h2>
            <pre>
            归去来兮，田园将芜胡不归？
            既自以心为形役，奚惆怅而独悲？
            悟已往之不谏，知来者之可追。
            实迷途其未远，觉今是而昨非。
        </pre>
            <span>
            ——陶渊明（东晋）
        </span>
            <ul>
                <li>无序列表项1</li>
                <li>无序列表项2</li>
                <li>无序列表项3</li>
                <li>无序列表项4</li>
            </ul>
            <table>
                <tr>
                    <th>列1</th>
                    <th>列2</th>
                </tr>
                <tr>
                    <td>单元格11</td>
                    <td>单元格12</td>
                </tr>
                <tr>
                    <td>单元格21</td>
                    <td>单元格22</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

CoelacanthusHex · 2023-10-16T15:06:15Z

写了个最小复现样例，在 Chrome 117 成功复现，除了 pre 标签以外的多数 HTML 标签都会受到影响。
最小复现样例代码

该 PoC 在 Arch Linux 上的 Firefox nightly（120.0a1.20231015.12）、Firefox Stable（118.0.2-1）、Firefox ESR（115.3.1-1）和 Chromium（118.0.5993.70-1）上皆可以复现所述行为。

CoelacanthusHex added a commit to CoelacanthusHex/dotfiles that referenced this issue Oct 16, 2023

fontconfig: disable Zhudou Sans

a459f29

because it leads huge line gap Buernia/Zhudou-Sans#7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

有关webfont的行高及其他使用问题 #7

有关webfont的行高及其他使用问题 #7

lakejason0 commented May 7, 2023 •

edited

Loading

Buernia commented May 7, 2023

lakejason0 commented May 8, 2023 •

edited

Loading

lakejason0 commented May 8, 2023 •

edited

Loading

CoelacanthusHex commented Oct 16, 2023

CoelacanthusHex commented Oct 16, 2023 •

edited

Loading

qyl27 commented Oct 16, 2023

CoelacanthusHex commented Oct 16, 2023

有关webfont的行高及其他使用问题 #7

有关webfont的行高及其他使用问题 #7

Comments

lakejason0 commented May 7, 2023 • edited Loading

Buernia commented May 7, 2023

lakejason0 commented May 8, 2023 • edited Loading

lakejason0 commented May 8, 2023 • edited Loading

CoelacanthusHex commented Oct 16, 2023

CoelacanthusHex commented Oct 16, 2023 • edited Loading

qyl27 commented Oct 16, 2023

CoelacanthusHex commented Oct 16, 2023

lakejason0 commented May 7, 2023 •

edited

Loading

lakejason0 commented May 8, 2023 •

edited

Loading

lakejason0 commented May 8, 2023 •

edited

Loading

CoelacanthusHex commented Oct 16, 2023 •

edited

Loading