HTML文件无法加载指定外部自定义字体的问题求助

嘿，我来帮你排查下这个让人头疼的问题！结合你描述的Keyman包环境和代码表现，大概率是这几个原因导致的，咱们一个个说：

1. 跨域资源共享（CORS）限制 #

你用的第一个核心字体（nasin-nanpa）是从代码托管平台的原始文件链接加载的，这类平台通常会默认限制跨域加载资源。当你的HTML在Keyman包这种受限的本地环境下被加载时，浏览器或者Keyman内置的WebView会因为跨域规则拦截这个字体请求；而第二个字体的源站应该配置了允许跨域加载的响应头，所以能正常生效。

解决办法：

• 把字体文件转成Base64编码嵌入到HTML里，完全摆脱外部链接依赖。你可以用在线工具把OTF字体转成Base64，然后修改@font-face的src：

  @font-face {
    font-family: 'nn';
    src: url(data:font/opentype;base64,[你的字体Base64编码内容]) format("opentype");
  }
  

  这样HTML就能直接加载字体，不会有任何跨域问题。

2. Keyman包的本地资源加载限制 #

你提到Keyman包内的文件不好被HTML引用，但如果你是自己制作这个键盘包的话，其实可以把nasin-nanpa字体文件直接打包到Keyman包里，然后用相对路径引用，这样比外部链接可靠得多：

<head>
  <style>
    @font-face {
      font-family: 'nn';
      src: url('./nasin-nanpa-5.0.0-beta.2-UCSUR.otf') format("opentype");
    }
    .sp {font-family: 'nn', sans-serif;}
  </style>
</head>
<p class="sp">foo ᥬᤀ</p>

只要字体和HTML在包内的同一目录（或者对应相对路径），就能正常加载，还不用依赖网络。

3. 字体格式或兼容性问题 #

第一个字体是OTF格式，第二个是TTF。虽然主流浏览器都支持OTF，但Keyman的内置WebView可能对某些beta版本的OTF字体（尤其是带UCSUR扩展的）有兼容性问题。你可以试试把这个OTF字体转成TTF格式再测试，或者确认字体文件本身的字符映射是否完整覆盖了你要用的ᥬᤀ等特殊字符。

作为同样折腾过Keyman键盘的爱好者，我特别理解你要对应字根展示的需求——优先试试Base64嵌入或者打包到Keyman包的方案，这两个应该能解决大部分环境限制的问题。如果还是不行，可以检查下字体的字符覆盖范围，或者换一个稳定版的字体文件测试~

内容来源于stack exchange