當(dāng)使用書寫模式:vertical-lr和文本方向:upright時(shí)，所有字符的高度大致相同。然而，在Safari上，單詞之間的空格字符變得非常小。以下是用于演示的代碼片段:

@import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");
span {
  font-family: Asap, sans-serif;
  text-orientation: upright;
  writing-mode: vertical-lr;
  -webkit-text-orientation: upright;
}

<span>Hello, World!</span>

# # #你可以試試這個(gè)，而不是使用文本方向:直立；嘗試只旋轉(zhuǎn)文本使用變換:旋轉(zhuǎn)(90度)；

span {
  font-family: Asap, sans-serif;
  transform: rotate(90deg);
}

然后瞄準(zhǔn)特定的瀏覽器:

span {
  font-family: Asap, sans-serif;
  -webkit-transform: rotate(90deg); 
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

這是一個(gè)片段中的例子

span {
  transform: rotate(90deg);
    display: block;
    position: fixed;
    text-transform: uppercase;
}

<span>Hello, World!</span>

# # #我最近遇到了這個(gè)問題，但在網(wǎng)上找不到任何相關(guān)信息。

但是我發(fā)現(xiàn)了一種奇怪的解決方案，似乎可以在所有主流瀏覽器中呈現(xiàn)相同的間距(在Chrome、Firefox和Safari中測(cè)試)。我知道我要提供的解決方案并不理想，但目前這是唯一能解決問題的方法。

解決方法是添加& ltspan & gt包含空白字符的元素，如& ampnbsp(不間斷空格字符)。設(shè)置這些添加的高度& ltspan & gt元素設(shè)置為適合您的設(shè)計(jì)和字體的固定值。請(qǐng)注意，需要將display屬性設(shè)置為inline-block，高度才能起作用。

查看此代碼筆及其提供的解決方案