如何删除“写作模式：vertical-rl＆amp;变换：旋转（180DEG）＆quot;

Question

仅使用简单而仅使用垂直文本作为侧向导航的一部分：

writing-mode: vertical-rl;
transform: rotate(180deg);

但是，在Chrome＆amp; Firefox，在我的两个标准字体上使用 arial ＆amp; 时代新闻罗马 文本被锯齿状的别名锯齿状，并有错误的信件。

我发现，通过将0.1添加到该学位上，这“解决”了混叠，并呈现出精美而忠实的字体，而无需任何锯齿状的混音：

transform: rotate(180.1deg);

但是，这增加了倾斜的倾斜度和一个额外的像素。菜单项，长话短说：这不是解决我的问题的（n优雅）解决方案，而是造成了新问题。

是否有另一种（更优雅的）方法可以摆脱垂直-RL和旋转（180DEG）的组合引入的锯齿状混叠？

---

Arial/Times，180度，直且锯齿状和混蛋。
请注意，字母间距看起来不正确！

---

arial/times，180.1级，没有锯齿的混叠和在字母之间的正确间距。
但是一切都是倾斜和倾斜的，这是不需要的：

---

demo

https://jsfiddle.net/8lrrv5epw/

Answer 1

我想我找到了解决这个问题的解决方案。您需要一个盒装属性，其值为 border-box 。

*,
::after,
::before {
  box-sizing: border-box; 
}

nav {
  height: auto;
  font-family: 'Arial';
  letter-spacing: 0.5px;
  font-size: 1.2em; /* was 1em */
  display: block;
  width: 100%;
}
nav li a {
  display: flex;
  background-color: blue;
  text-decoration: none;
  color: #fff;
  padding: 1.5rem 1rem;
  text-align: center;
  transform: scale(0.8); /* scale down */
  transform: rotate(180deg);
}

*,
::after,
::before {
  box-sizing: border-box;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav {
  height: auto;
  font-family: "Arial";
  letter-spacing: 0.5px;
  font-size: 1.2em;
  display: block;
  width: 100%;
}

nav li {
  writing-mode: vertical-rl;
  background: blue;
  padding: 0em;
  border-top: 1px solid white;
}

nav li:first-of-type {
  border-top: none
}

nav li a {
  display: flex;
  background-color: blue;
  text-decoration: none;
  color: #fff;
  padding: 1.5em 1em;
  text-align: center;
  transform: scale(0.8);
  transform: rotate(180deg);
  /* transform: rotate(180.1deg); */
}

nav li.selected,
nav li.selected a {
  background-color: purple;
}

<nav>
  <ul>
    <li><a href="#">Bureau</a></li>
    <li class="selected"><a href="#">Initiatief</a></li>
    <li><a href="#">Dienst</a></li>
    <li><a href="#">Ontwerp</a></li>
    <li><a href="#">Concept</a></li>
    <li><a href="#">Oeuvre</a></li>
  </ul>
</nav>