uni-app 设置字体描边效果,用基座打包的描边和云打包出来,在ios的效果不一致

uni-app 设置字体描边效果,用基座打包的描边和云打包出来,在ios的效果不一致

类别 信息
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 11.2.3 (20D91)
HBuilderX 正式
HBuilderX版本 4.24
手机系统 iOS
手机版本号 iOS 17
手机厂商 苹果
手机机型 15 pro max
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码:

压缩包中test.vue文件为测试代码

操作步骤:

复制test.vue到任何项目,用基座调试版本和云打包分别安装真机调试,即可复现

预期结果:

期待和基座显示版本或者安卓效果一致

实际结果:

云打包出来描边左侧宽,右侧窄,详细见压缩包中的截图

bug描述:

设置字体描边效果,用基座打包的描边和云打包出来,在ios的效果不一致,安卓正常的。
云打包出来描边左侧宽,右侧窄,显示效果不好
描边代码: -webkit-text-stroke: 1rpx red !important;,已上传相关vue文件及显示截图

期待解答:

  1. 是什么原因引起的?
  2. 有没有什么处理方案?

描边bug.zip


更多关于uni-app 设置字体描边效果,用基座打包的描边和云打包出来,在ios的效果不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 设置字体描边效果,用基座打包的描边和云打包出来,在ios的效果不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中实现字体描边效果,通常可以通过CSS样式或者Canvas绘图来实现。对于你所描述的问题,即在基座打包和云打包后,iOS上的描边效果不一致,这可能是由于不同打包方式导致的资源处理差异或iOS版本兼容性引起的。为了尽量保持效果一致,我们可以使用较为通用的CSS方法来实现字体描边,并利用uni-app的样式隔离和条件编译来处理不同平台的差异。

以下是一个使用CSS实现字体描边效果的示例代码:

<template>
  <view class="container">
    <text class="outlined-text">Hello, uni-app!</text>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

/* 基本文本样式 */
.outlined-text {
  font-size: 32px;
  color: transparent; /* 文本颜色设为透明 */
  -webkit-text-stroke: 1px black; /* 描边颜色和宽度 */
  text-stroke: 1px black; /* 兼容其他浏览器的写法,虽然目前-webkit-text-stroke更常用 */
}

/* 针对iOS平台,可以尝试使用条件编译来微调样式 */
#ifdef APP-PLUS-IOS
.outlined-text {
  /* 可以在这里尝试微调描边效果,比如调整描边宽度或颜色 */
  -webkit-text-stroke: 1.2px #333; /* 示例:稍微调整描边宽度和颜色 */
}
#endif
</style>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

在这个示例中,我们使用了-webkit-text-stroke属性来实现文本的描边效果。这个属性在Safari和基于WebKit的浏览器中支持良好,包括iOS上的Safari。我们设置了文本颜色为透明,这样用户只能看到描边效果。

此外,我们使用了uni-app的条件编译指令#ifdef APP-PLUS-IOS来针对iOS平台进行样式微调。这可以帮助解决在不同打包方式下可能出现的样式差异问题。当然,这里的调整需要根据实际情况进行,可能需要多次尝试以找到最合适的值。

请注意,由于-webkit-text-stroke是一个非标准属性,虽然它在现代浏览器中得到了较好的支持,但在某些极端情况下仍可能存在兼容性问题。如果遇到这类问题,可以考虑使用Canvas绘图来实现更复杂的文本效果。不过,对于简单的描边效果,上述CSS方法通常已经足够。

回到顶部