更新记录

1.0.1（2024-03-11）

没有定义LinearGradient和Color时，svg的字体颜色继承父标签的字体颜色

1.0.0（2024-03-10）

无更新

平台兼容性

font2svg

props

props:{
    Width:{
        type:String,
        default:'' //默认空时取值window.innerWidth||document.documentElement.offsetWidth;rpx单位的数值;auto：字符串长度*字符串的fontSize;建议不填写
    },
    Height:{
        type:String,
        default:'' //默认空，取值字符串的FontSize;rpx单位的数值,建议不填写
    },
    TextString:{
        type:String,
        default:'' //需要被转换的文本
    },
    FontSize:{
        type:String,
        default:'24rpx' //默认字体大小24rpx
    },
    FontFamily:{
        type:String,
        default:'' //渲染的字体
    },
    FontWeight:{
        type:String,
        default:''
    },
    FontStyle:{
        type:String,
        default:'' //取值为''或者是normal渲染的值是normal否则为oblique(斜体显示)
    },
    Align:{
        type:String,
        default:'left' //取值 left|center|right
    },
    LinearGradient:{
        type:String,
        default:'' //渐变色，第一个值方向只有left和top,颜色值支持16进制的RGB/RGBA，例如 'left,#f00,#000','left,#f00 20%,#000 80%','left,#000000AA 20%,#0000ff22 80%'
    },
    Color:{
        type:String,
        default:'' //当LinearGradient生效的时候字体颜色生效
    }

emit

@renderOver(e)      渲染完成回调，参数e:svg图片代码

使用方式

    <font2svg :TextString="text" Align="center" @renderOver="font2Svg" LinearGradient="left,#f00,#000"></font2svg>

1. 由于使用renderjs进行的渲染，renderjs目前仅支持内联使用
2. APP无法在逻辑层直接获取到渲染层的dom，因此对document的操作只能在renderjs中
3. renderjs目前uniapp官方只支持APP和H5的使用，暂不支持小程序

2.组件化使用方式

<template>
  <view class="index">
    <font2svg :TextString="text" Align="center" FontFamily="你的字体名" @renderOver="font2Svg" LinearGradient="left,#f00,#000"></font2svg>
  </view>
</template>

<script>
import font2svg from '@/components/liupishui-font2svg/liupishui-font2svg.vue';

export default {
  components: {
        font2svg
  },
  data() {
    return {
        TextString:"测试"
    }
  },
  methods: {
    font2Svg(e) {
      // e为导出svg图片代码
      console.log('==== renderOver :', e)
    }
  }
}
</script>
<style>
    @font-face {
        font-family: "你的字体名";
        src:url('http://192.168.0.133:57289/xxxx字体.woff2') format('woff2');
    }
</style>

注意

font2svg并不是真正的将字体转为svg图标，而是转为<svg><text></text></svg>这种格式

写在最后

若对插件有任何疑问或者优化建议，欢迎在评论区留言，在插件市场中的私信消息本人可能不经常留意，导致没能及时回复， 可以加入本人的插件问答QQ交流群: 539143850，欢迎进群交流。