强制 Google Web 字体使用“ct”连字

Question

我在我的项目中使用字体 IM Fell English：https://fonts.google.com/specimen/IM+Fell+English?selection.family=IM+Fell+English

它支持“长s”ſ，以及其他常见的连字，例如“ff”，“fi”，“ft”等

但是，我似乎无法让“ct”连字工作，尽管你可以看到该字体确实有字形：这里1）https://www.fontsquirrel.com/fonts/im-fell-english- pro 和这里 2) https://iginomarini.com/fell/the-revival-fonts/

我已按照此处的指示尝试了

font-variant-ligatures

CSS 属性，但无论我设置哪个值，它都不起作用：https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-连字

我目前的妥协方案是用“ſ”Unicode字符替换“s”，但据我所知，“ct”连字（也不是连接字形）没有这样的Unicode字符（据我所知） ！）

此外，为了让长ſ发挥作用，我必须以这种方式

@import

字体：

@import url('https://fonts.googleapis.com/css?family=IM+Fell+English:400,400i&subset=all&text=+!%22%23$%25%26()*%2B,-.%2F0123456789:;%3C%3D%3E%3F@ABCDEFGHIJKLMNOPQRSTUVWXYZ%5B%5C%5Dabcdefghijklmnopqrstuvwxyz%7B%7D%C2%A2%C2%A3%C2%A5%C2%A9%C2%AE%C3%97%C3%B7%C5%BF%E2%80%98%E2%80%99%E2%80%9C%E2%80%9D%E2%82%AC');

我获取

text

参数值的方法是，我在IM Fell English的Google Font网页的预览字段中输入长ſ（上面的第一个链接），然后我看我的浏览器发送了哪个请求出来并复制它。

正如你在下面看到的，我非常需要重新创建这个！ （注意“Octaves”中的“ct”；我已经处理了标题中的长ſ，但没有处理段落）

休闲： 原始来源：

---

编辑：我找到了解决方法。 我下载了IM Fell英文字体，然后使用字符映射表（Windows 10下可用），搜索字形并复制它（U+E004私人使用）。现在的问题是我无法搜索（使用 Ctrl F）包含连字的任何内容！因此，我无法搜索“Octaves”，因为它现在是“Oaves”。

我相信标题中原来的问题仍然存在。我不需要解决方法，我想让浏览器强制连字（如果可能的话）。

Answer 1

正如 Eana Hufwe 所评论的，当通过 API 请求字体时，谷歌将默认删除额外的替换功能。相反，您会得到与页面上当前语言（或更准确地说是其中使用的文本）匹配的子集

1.获取完整的“未替换”woff2

您可以使用 dev API 获取完整的 woff2 文件。在以下示例中，我使用 JSON 响应的静态副本。获取 API 密钥是免费且非常简单的（请参阅文档。），并提供来自 google 的最新字体列表。

/*
//if you obtained an API key use this dynamic query URL
let format = 'woff2'
let apiKey = "";
let apiURL = `https://www.googleapis.com/webfonts/v1/webfonts?capability=VF&capability=${format}&sort=style&key=${apiKey}`;
*/

let apiURL = "https://cdn.jsdelivr.net/gh/herrstrietzel/fonthelpers@main/json/gfontsAPI_woff2.json";


// get font item
let fontFamily = "IM Fell English";
let familyQuery = fontFamily.replaceAll(" ", "+");
let fontList

( async()=>{
  fontList =  await (await (await fetch(apiURL)).json() ).items;
  //get data options
  populateDatalist(fontsDataOptions, fontList)

  //init
  inputFont.dispatchEvent(new Event('change'))

})()

inputFont.addEventListener('change', e=>{
  fontFamily = inputFont.value
  let item = fontList.filter(item => item.family === fontFamily)[0];
  let fontUrl = item.files.regular
  
  a_woff2.href = fontUrl
  a_woff2.textContent = fontUrl
  
})

function populateDatalist(target, list) {
  let datalistOptions = "";
  list.forEach((font) => {
      datalistOptions += `<option >${font.family}</option>`;
  });
  target.insertAdjacentHTML("beforeend", datalistOptions);
}

<fieldset>
  <legend>Get font from API </legend>
  <input id="inputFont" type="text" list="fontsDataOptions" value="IM Fell English" placeholder="Search for google font">
  <datalist id="fontsDataOptions"></datalist>


</fieldset>
<p><strong>Woff font URL: </strong>
  <a id="a_woff2" href=""></a>
</p>

2.检查字体特征

将字体拖放到 UI 助手中wakamaifondue.com。
该工具将向您显示该字体的所有可用功能以及包含所有 CSS 的样式表

font-feature-settings

@font-face {
  font-family: "IM Fell English";
  src: url('https://fonts.gstatic.com/s/imfellenglish/v14/Ktk1ALSLW8zDe0rthJysWrnLsAz3EqmZVY9Y5w.woff2');
  font-weight: 400;
  font-style: normal
}

body {
  font-size: 8vw;
  font-family: "IM Fell English";
}

.im-fell-english-roman-dlig {
  font-feature-settings: "dlig" on;
  /* font-variant-ligatures: discretionary-ligatures; */
}

.im-fell-english-roman-ss01 {
  font-feature-settings: "ss01" on;
}

<p>
  <span class="im-fell-english-roman-dlig">
    ct ſs
</span>
  <span class="im-fell-english-roman-ss01">
    sa sb sc sd se sf sg sh si sj sk sl sm sn so sp sq sr ss st su sv sw sx sy sz sà sá sâ sã sä så sæ sç sè sé sê së sì sí sî sï sð sñ sò só sô sõ sö sø sù sú sû sü sý sþ sÿ sā să są sć sč sď sđ sē sė sę sě sğ sģ sī sį sķ sĺ sļ sľ sł sń sņ sň sō ső sœ sŕ sŗ sř sś sş sš sţ sť sū sů sű sų sŵ sŷ sź sż sž sș sẁ sẃ sẅ sỳ
</span>
</p>

<h3>No features appllied</h3>
<p>
    ct ſs
    sa sb sc sd se sf sg sh si sj sk sl sm sn so sp sq sr ss st su sv sw sx sy sz sà sá sâ sã sä så sæ sç sè sé sê së sì sí sî sï sð sñ sò só sô sõ sö sø sù sú sû sü sý sþ sÿ sā să są sć sč sď sđ sē sė sę sě sğ sģ sī sį sķ sĺ sļ sľ sł sń sņ sň sō ső sœ sŕ sŗ sř sś sş sš sţ sť sū sů sű sų sŵ sŷ sź sż sž sș sẁ sẃ sẅ sỳ
</p>

您也可以将此方法应用于支持箭头、符号等特殊字形的谷歌字体（例如 IBM Plex）。