如何解决使用转换会导致 Safari 中字体大于边界框的工件
我们有这种字体,字体的边界框很小。我们正在使用拆分文本来为文本块设置动画,但我已删除所有这些以最小化演示并直接包含 HTML。
如果我使用 translate3d,那么某些字符会在 safari 中被剪切,仅使用 translate 有时不会导致伪影,但如果您选择第三个字符,则会看到剪切问题。如果我为 translate 或 translate3d 设置动画,则文本会被剪切。我认为这是浏览器的渲染错误,是否有解决此问题的方法?
@import url("https://fonts.googleapis.com/css2?family=Allura&display=swap");
html {
background: #323436;
color: #f1f1f1;
font-family: Sans-Serif;
text-align: center;
padding: 25px;
}
#text {
font-size: 140px;
line-height: 140px;
font-family: "Allura";
display: block;
position: relative;
top: 50px;
}
#text div{
border: solid 1px red;
transform: translate3d(0px,0px,0px) scale(2,1);
/* transform: translate(0px,1); */
/* animation: scaleit 1s; */
/* animation: scaleit3d 1s; */
}
@keyframes scaleit{
from{
transform: translate(0px,1);
}
to{
transform: translate(0px,0px) scale(1,1);
}
}
@keyframes scaleit3d{
from{
transform: translate3d(0px,1);
}
to{
transform: translate3d(0px,1);
}
}
<div id="text">
<div style="position: relative; display: inline-block;">R</div>
<div style="position: relative; display: inline-block;">i</div>
<div style="position: relative; display: inline-block;">s</div>
<div style="position: relative; display: inline-block;">k</div>
<div style="position: relative; display: inline-block;">e</div>
<div style="position: relative; display: inline-block;">B</div>
<div style="position: relative; display: inline-block;">o</div>
<div style="position: relative; display: inline-block;">u</div>
<div style="position: relative; display: inline-block;">d</div>
<div style="position: relative; display: inline-block;">o</div>
<div style="position: relative; display: inline-block;">i</div>
<div style="position: relative; display: inline-block;">r</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。