Zhudou-Sans
Zhudou-Sans copied to clipboard
Buernia
有关webfont的行高及其他使用问题
非常感谢您制作这样一款专注于标点符号的字体！我在下载时发现有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后会使用煮豆黑体的行高，于是变得异常高）。我应该如何在网页环境下使用该字体呢？
网页可变字体的用法可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
本字体只有字重可变，字重值可以填写250—900之间的任意值，其中400相当于 Regular，700相当于 Bold。
其他问题有待尝试能否复现。
我稍后给自己的网站加个样式，给html加class启用煮豆黑体吧。
https://lakeus.xyz
给<html>加.lakeus-zhudou-sans
至于ascent-override，好像标点位置也会有问题，不太适用吧。
可以看到行高差距还是很大的（前无煮豆黑体，后有）：
@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，其他的为默认值。
本人于 Arch Linux 上的所有 Qt 程序的文本框中复现了该问题（使用非可变字体版本），只要文段中存在煮豆黑体的字符，皆会导致行高巨大。
无煮豆黑体时行高正常。
本人亦于 Firefox Nightly 浏览器中复现了题主所述在浏览器里的行高问题。
~~目前发现在 HTML 里只有 ul > li 会发生行高变化，且需要保证没有 line-height 属性固定行高。~~ 这是 MDN 自带的 CSS 的问题。
写了个最小复现样例，在 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>
写了个最小复现样例，在 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） 上皆可以复现所述行为。