如何解决为什么桌面中文字体“更方”,如何解决?
我正在开发一款中文纸牌游戏。
.cards {
display:flex;
justify-content:space-evenly;
flex-wrap:wrap;
font-size:2em;
}
.card {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
border:1px solid black;
margin:0.25em;
padding:0.25em;
cursor:pointer;
}
.red {
color:red;
border:1px solid red;
padding:0;
}
.blue {
color:blue;
border:1px solid blue;
padding:0;
}
<div class='cards'>
<div class='card'>
<div class='red'>对</div>
<div class='blue'>對</div>
</div>
</div>
下面是桌面上的打印屏幕(Debian Buster 上的 Firefox 78.11.0esr 64 位)。红色矩形(CSS border:1px solid red; padding:0;
,下同)内的区域为 38x49 像素(0.78:1 比例)。
下面是桌面上的打印屏幕(Debian Buster 上的 Chromium 90.0.4430.212)。红色矩形内的区域为 32x44 像素(0.73:1 的比例)。
以下是智能手机上的打印屏幕(Android 9/MIUI Global 11.0.4 上的 Chrome 91.0.4472.88)。红色矩形内的区域为 64x94 像素(0.68:1 比例)。
为什么比例如此不同?看起来差别很小,但智能手机上字符上方和下方的死角占用了大量屏幕空间。
我不想specify a @font-face,因为文件很大。我可以使用负的垂直边距,但如果我事先不知道比例,那会很危险。有没有其他方法可以为中文字体添加方形字符(因为汉字设计为方形)?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。