这个canvas二进制流动特效怎么更改字体?

@Ta 06-22 19:25发布,06-22 19:26修改 1447点击

HTML代码

手机

回复列表(8)
  • @Ta / 06-22 19:27 / /

    试着改也没效果呢
    手机

  • @Ta / 06-22 20:59 / /
    搞不懂,改了确实没效果
  • @Ta / 06-23 00:21 / /

    …算了不整了
    手机

  • @Ta / 06-23 07:56 / /
  • @Ta / 06-23 08:15 / /

    @童真再见,我弄好了。要点:

    1. 浏览器不支持阿里巴巴普惠体的ttf,必须使用otf。如果你不确定,就把下载到的每一种格式都添加进去。有些ttf能用,有些则不能用。如果没有otf,woff和woff2也可以。如果只有ttf,并且不能用(按F12看控制台,浏览器提示不支持),那可以使用在线ttf转woff(woff兼容性最好,otf次之,ttf最差):https://onlineconvertfree.com/zh/convert-format/ttf-to-woff/

      @font-face {
          font-family: "Alibaba-PuHuiTi-Bold";
          src:
              url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-10b3891b-be67-4103-a60f-9da1d057470c/cad4624c-d213-4eb1-a9b3-4f1865a94655.otf"),
              url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-10b3891b-be67-4103-a60f-9da1d057470c/824e0853-911e-4d24-8df5-4c02adc070bf.ttf");
      }
      
    2. @font-face必须在<style>里。

    3. src: url()里的链接必须是HTTPS链接,不能是本地路径。你可以附件上传获取链接。

    4. ctx.font的字体大小和字体名称之间必须有空格,而且字体名称只能是在@font-face里定义的font-family不能是文件名。如果字体没有在@font-face中定义,也没有在本地安装,那就不可能在网页中使用。

      ctx.font = fontSize + 'px Alibaba-PuHuiTi-Bold';
      
    5. 就算字体在本地安装了,也只能使用字体在操作系统中注册的名称(安装字体时可以看到,或者打开可以选择字体的程序看下拉框里的名称),绝不可能是文件名。想引用字体,使用的一定是它的字体名称,不可能通过文件名引用任何字体

      比如,想引用本地安装的阿里巴巴普惠体Bold,应该使用

      const fontSize = 20;
      ctx.font = fontSize + 'px AlibabaPuHuiTiB';
      

      用中文名也是可以的

      const fontSize = 20;
      ctx.font = fontSize + 'px 阿里巴巴普惠体-B';
      

      图片.png

  • @Ta / 06-23 10:27 / /

    HTML代码

    小米MIX2s(白)

  • @Ta / 06-23 16:21 / /
  • @Ta / 06-23 17:11 / /

    HTML代码

    小米MIX2s(白)

添加新回复
回复需要登录