安卓下字体加粗无法居中的Bug？
发布于 5 年前 作者 dzhu 1297 次浏览 来自 问答

在制作小程序的时候发现了一个问题，代码和效果如下。

//  poster.js
 
<view class="container" style="background-color: {{background_hex}}; height: {{height}}px" bindtouchend="play">
  <text class="content" style="color: {{text_hex}};">{{ char }}</text> 
</view>
// poster.css
 
.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  background-color: #EEE;
}
 
.content {
  font-size: 700rpx;
  text-align: center;
  font-weight: bold;
  margin: auto;
}

实现功能就是单个汉字居中展示。但是在安卓机器下面，会出现向右偏移一定距离具体图片如下。

    在安卓机下面，可以看到加粗的汉字会__偏右__。而下图中的显示结果，除了将css代码中的font-weight: bold; 去除掉之后，其余的代码没有改变，显示效果的话就会__居中__。

请问，这种情况应该怎么处理？ 在好几台安卓机下面都是这样的效果。 iOS下面没有任何问题。

1 回复

请问这个是什么原因？

回到顶部