CSS 中的字母间距会改变单词间距吗？

Question

我观察到，当我调整CSS中的字母间距时，单词间距似乎会自动改变。然而，经过广泛的研究，我找不到关于这种关系的具体信息。

背景： 我查阅了各种资源，包括 ChatGPT 4.0，一致认为字母和单词间距是独立的属性。我已经在多种字体和浏览器中测试了这种行为，并始终注意到这种变化。

此行为与 CorelDRAW 等基于矢量的图形设计软件不同，在 CorelDRAW 中，调整字母间距不会影响字间距。我喜欢浏览器的方法，并认为它产生了真正令人愉悦的结果。随着字母间距的减小，它完美地减小了字间距。

问题： 修改字母间距时浏览器中的字间距调整是否是公认的现象？ Chat GBT 表示这种情况不应该发生，而且它们是独立的财产。一者不会改变另一者。我在网上找不到有关此主题的任何信息。

我已经在不同的字体和浏览器上验证了它。字间距的减少或增加与字母间距成比例，并且无论字体如何，都是相同的。

<!DOCTYPE html>
<html>
<head>
<style>
h1{
  letter-spacing: 20px;
  font-size: 20px;
}

h2 {
  letter-spacing: 10px;
  font-size: 20px;
}

h3 {
  letter-spacing: 5px;
  font-size: 20px;
}
span {
  border-style: solid;
}
</style>
</head>
<body>

<h1><span>This</span> <span>is</span> <span>heading</span> <span>1</span></h1>
<h2><span>This</span> <span>is</span> <span>heading</span> <span>2</span></h2>
<h3><span>This</span> <span>is</span> <span>heading</span> <span>3</span></h3>

</body>
</html>

Answer 1

显示各个字形矩形的示例：

// "lettering"
document.querySelectorAll('div > *').forEach(
 h => h.innerHTML = [...h.innerHTML].map(c => `<span data-char="${c}">${c}</span>`).join('')
 );

// append computed width
document.querySelectorAll('span').forEach(
 s => s.insertAdjacentHTML('beforeend', `<samp>${s.getBoundingClientRect().width}</samp>`)
);

h1 {
  letter-spacing: 20px;
  font-size: 20px;
}

h2 {
  letter-spacing: 10px;
  font-size: 20px;
}

h3 {
  letter-spacing: 5px;
  font-size: 20px;
}

h4 {
  letter-spacing: 0px;
  font-size: 20px;
}
div span {
  outline: 1px solid;
  outline-offset: -1px;
  position: relative;
}

samp {
  position: absolute;
  top: 100%;
  left: 0;
  font-size: 10px;
  letter-spacing: 0;
  word-spacing: 1;
}
div:not(:hover) span:not([data-char=" "]) samp {
 opacity: 0;
}

div:hover span:not(:hover) samp {
  opacity: 0;
}

<div>
  <h1>20:20 This is heading 1</h1>
  <h2>10:20 This is heading 2</h2>
  <h3>5:20 This is heading 3</h3>
  <h4>0:20 This is heading 3</h4>
</div>

对我来说渲染：

这表明 20px 的固有“空间”宽度是 5px，并且

letter-spacing

（20、10、5 和 0 px）被简单地添加到其中，产生 25 15 10 和 5 像素宽的字形。同样适用于 10 像素宽的零数字，添加

letter-spacing

后宽度分别为 30、20、15 和 10。

如果

letter-spacing

仅添加到非 qhitespace 字形，那么您必须记住每次触摸它时都要调整

word-spacing

。

CSS 中的字母间距会改变单词间距吗？

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

1个回答

最新问题

CSS 中的字母间距会改变单词间距吗？

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

1个回答

最新问题

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