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文件及显示截图
期待解答:
- 是什么原因引起的?
- 有没有什么处理方案?
更多关于uni-app 设置字体描边效果,用基座打包的描边和云打包出来,在ios的效果不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于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方法通常已经足够。