前提
身为一只小白,只会学校学的那一点点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;
}