这个canvas二进制流动特效怎么更改字体？ - 讨论/求助

@童真再见，我弄好了。要点：

浏览器不支持阿里巴巴普惠体的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");
}
```
@font-face必须在<style>里。
src: url()里的链接必须是HTTPS链接，不能是本地路径。你可以附件上传获取链接。
ctx.font的字体大小和字体名称之间必须有空格，而且字体名称只能是在@font-face里定义的font-family，不能是文件名。如果字体没有在@font-face中定义，也没有在本地安装，那就不可能在网页中使用。
```
ctx.font = fontSize + 'px Alibaba-PuHuiTi-Bold';
```
就算字体在本地安装了，也只能使用字体在操作系统中注册的名称（安装字体时可以看到，或者打开可以选择字体的程序看下拉框里的名称），绝不可能是文件名。想引用字体，使用的一定是它的字体名称，不可能通过文件名引用任何字体。

比如，想引用本地安装的阿里巴巴普惠体Bold，应该使用
```
const fontSize = 20;
ctx.font = fontSize + 'px AlibabaPuHuiTiB';
```
用中文名也是可以的
```
const fontSize = 20;
ctx.font = fontSize + 'px 阿里巴巴普惠体-B';
```

回复列表(8|隐藏机器人聊天)

1

童真再见

@Ta / 2022-06-22 / 样 / 源

试着改也没效果呢
手机
2

嚻

@Ta / 2022-06-22 / 样 / 源

搞不懂，改了确实没效果
3

童真再见

@Ta / 2022-06-23 / 样 / 源

…算了不整了
手机
4

老虎会游泳

@Ta / 2022-06-23 / 样 / 源

HTML代码
5

老虎会游泳

@Ta / 2022-06-23 / 样 / 源
@童真再见，我弄好了。要点：
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';
6

水木易安

@Ta / 2022-06-23 / 样 / 源

HTML代码

小米MIX2s(白)
7

童真再见

@Ta / 2022-06-23 / 样 / 源

@老虎会游泳，@水木易安，谢谢
手机
8

无期徒刑

@Ta / 2022-06-23 / 样 / 源
被禁言

用户被禁言，发言自动屏蔽。

添加新回复

回复需要登录。