首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >用于CSS的Opentype `name`记录

用于CSS的Opentype `name`记录
EN

Stack Overflow用户
提问于 2021-10-26 02:32:10
回答 2查看 40关注 0票数 0

我正在尝试使用我的CSS字体,但遇到了一点问题。似乎将非标准值设置为"Typographic Subfamily“(name ID = 17)将使字体在CSS中无法加载,例如"700W”、"Sans“、"Serif”等(在Google Chrome上测试)。

我想问一下CSS font-family使用的OpenType名称是什么?它似乎使用“字体系列”(name ID = 1),但对于非标准ID 17值的字体,它在我的系统上是无法识别的。

注意:我知道@font-face是可用的,但是加载为webfont是不可行的。

编辑:字体链接在这里:https://github.com/nightFurySL2001/maoken-heavy-labourer。加载Maoken Heavy Labourer GothicMaoken Heavy Labourer - GothicMaoken Heavy Labourer Gothic Regular猫啃网扛重族—黑猫啃网扛重族或名称ID 16/17和语言的任何其他组合不会加载字体(MaokenHeavyLabourer-Gothic-Regular.ttf)。

编辑2:假设字体安装在Windows机上,我们正在尝试加载字体,方法类似于加载font-family: "Segoe UI", Arial;。直接使用name ID = 16 + 17无法在Chrome中加载字体。

EN

回答 2

Stack Overflow用户

发布于 2021-10-31 15:45:13

很抱歉,这个问题最终变成了两个独立的问题。

例如,我的字体最终加载时没有显示单词Heavy,也就是说,只有"Maoken Labourer哥特式“可以在Chrome上工作(但"Maoken Heavy Labourer -哥特式”可以在Firefox上工作)。

其次,名称ID为17 = "700W“的字体粗细(不是我的字体,而是另一个专有字体)只能用名称ID 16加载,然后单独指定font-weight

我仍然想知道为什么会出现这些问题。

票数 0
EN

Stack Overflow用户

发布于 2021-11-05 17:27:40

根据您的注释,您只需要每个操作系统的字体系统名称,因此:

  • 窗口:双击字体文件,然后查看“字体名称”。(或者请有窗口的人检查)。在本例中,Maoken Heavy Labourer - Ming.
  • Mac:打开Font Book,然后在右边的预览中查看全名(或者请拥有mac的人查看)。在本例中,它是Maoken Heavy Labourer Ming.

然后,为了确保为所有用户选择字体,您要确保CSS使用两个名称,并使用您需要的任何备用堆栈,但如果您的所有用户都已经安装了该字体(根据您的评论),那么实际上根本就不需要备用字体,并且将其设置为可笑的东西会使丢失的字体最明显。

代码语言:javascript
复制
p {
  font-family: "Maoken Heavy Labourer - Ming", "Maoken Heavy Labourer Ming", fantasy;
}

需要注意的是,对于字体具有自定义名称的每个区域设置,您都需要执行此操作,因为作为中文字体,这可能会在Windows/Mac中显示不同的名称,并将操作系统语言设置为这两个操作系统可用的众多中文变体中的一个。

这就是为什么使用@font-face with WOFF2 subsetting会更好,因为你可以声明一个名称,而不是必须依赖于它的各种操作系统名称。

具体来说,对于CJK,这意味着在unicode点列表(不只是像"CJK统一表意文字“这样的"unicode块”,而是各个代码点和短范围的实际列表)上设置子集,以覆盖“我使用的语言中的前100个最常用的字符”、“我使用的语言中接下来的100个最常用的字符”等等,以便您实际提供非常小的字体。然后你也可以依靠浏览器缓存那些小字体,这意味着你的用户应该:

  1. 不会下载整个80MB字体的数据,因为你肯定没有使用词典中的每一个字符,而且
  2. 并没有真正注意到加载页面的任何问题,因为每个页面需要的字体一次只有几个小字体块。

中文和日文都有在线频率列表,这使得“确定每种字体中包含哪些字符”变得相当容易,您甚至可以玩弄一下每个块中要放入多少个字符。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69716823

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档