在设计和排版中，有时我们需要使用字体竖着排列。利用CSS可以轻松实现字体旋转90度的显示效果。本文将为大家介绍如何利用CSS实现此效果。

首先，我们需要使用transform属性来实现元素的旋转。transform属性可以将元素进行缩放、平移、旋转等变换操作。在这里，我们需要将字体元素旋转90度，因此我们需要使用rotate()函数来进行旋转操作。

/* 将选择的元素旋转90度 */
.selector {
transform: rotate(90deg);
}

在代码中，我们将.rotate类应用于我们想要旋转的元素上。在这个例子中，我们将其应用于一个div标签，但它可以应用于任何元素。

一旦我们将元素旋转了90度，它就可以正常显示了，但是我们需要将其调整为竖直方向。为了解决这个问题，我们需要使用writing-mode属性。

/* 将选择的元素设置为竖排模式 */
.selector {
writing-mode: vertical-lr;
}

这个属性可以将元素设置为竖排模式。我们将writing-mode设置为vertical-lr（从上到下的竖排模式），这使我们的文本在竖直方向上正确显示。

最后，您还可以利用CSS样式设置字体的大小、颜色、字体等等。下面列出一些常用的样式属性，供参考。

/* 设置字体大小 */
.selector {
font-size: 24px;
}
/* 设置字体颜色 */
.selector {
color: #333;
}
/* 设置字体类型 */
.selector {
font-family: Arial, sans-serif;
}

以上就是利用CSS实现字体旋转90度显示效果的方法。您可以在设计和排版中灵活运用这个技巧，创造出更加丰富和美观的页面效果。