CSS单位CH用法

前提

身为一只小白，只会学校学的那一点点css的内容，今天想在自己的网站加上一个类似打字的动画，第一次用到ch单位。

按道理

• 1ch = 1个英文 = 1个数字
• 2ch = 1个中文

以下代码，在显示英文数字的时候1ch就是等于一个英文一个数字，是没有问题的。可是在显示中文ch长度。以下的动画就效果就出现问题，因为2ch不等于一个中文。

放个代码

<div class="middleBox-title">
  <p>一只抱枕枕p>
div>

.middleBox-title p {
    font-size: 1.2 rem;
    border-right: .1em solid;
    width: 10ch;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 2s steps(5, end), blink-caret .3s step-end infinite alternate;
    -webkit-animation: typing 2s steps(5, end), blink-caret .3s step-end infinite alternate;
    margin: -30px 0 0 480px;
    transition: all 0.3s;
}

解决方案

1.修改字符集，中易宋体（Simsun）是好用的。
借鉴https://www.zhihu.com/question/36455024问题的答案。
放个css代码。

* {
    font-family: 'Simsun';
}

2.可是我不喜欢simsun的字体样子嗷！怎么办？改为em。建议使用em
放个代码

* {
    /* font-family: 'Simsun'; */
    font-family: 'Microsoft YaHei';/*微软雅黑 没有商用*/
}

.middleBox-title p {
    font-size: 1.2rem;
    border-right: .1em solid;
    width: 5em;/*12ch;*/
    white-space: nowrap;
    overflow: hidden;
    animation: typing 2s steps(5, end), blink-caret .3s step-end infinite alternate;
    -webkit-animation: typing 2s steps(5, end), blink-caret .3s step-end infinite alternate;
    margin: -30px 0 0 480px;
    transition: all 0.3s;
}