css Google字体- IBM Plex Sans和左/右箭头渲染

wfsdck30  于 2023-06-25  发布在  Go
关注(0)|答案(2)|浏览(147)

我使用IBM Plex Sans从谷歌字体,但字符作为左/右箭头呈现不同,然后其他符号。
问题出现在Chrome,New Edge,Opera,Safari,Firefox上,但Internet Explorer 11很好。
图片:

问题出在哪里?

wlp8pajw

wlp8pajw1#

您可以找到Unicode箭头并将参数添加到相关的Google Fonts URL。Here是详细说明。

pbwdgjma

pbwdgjma2#

显然,尽管IBM Plex支持,但Google字体API并不返回此Unicode范围的字形。

解决方案一:下载“完整”字体

Google字体UI包括一个“下载系列”按钮,用于下载完整的trutype/ttf字体系列。
您可以下载这些文件并将它们作为本地托管的字体源加载。

**缺点:**由于truetype压缩效率较低,这些文件非常大。

你可以通过像transfonter这样的工具将它们转换为woff 2,但是字体仍然非常大,因为它包含了所有可用的字形。

解决方法二:通过&text查询参数创建自定义子集

获取包含所有箭头字形的子集,如下所示:

https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&text=←↑→↓↔↕↖↗↘↙

输出CSS:

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=zYXgKVElMYYaJe8bpLHnCwDKtdPMDmTK4TVtn4n7Y97fmmF-kWzn6TYFtPjVl2q7BmUocg&skey=db4d85f0f9937532&v=v19) format('woff2');
}

现在,我们可以添加@font-face规则,以便除了常规加载的子集合之外,还加载箭头符号

/** only arrows */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=zYXgKVElMYYaJe8bpLHnCwDKtdPMD6au90cJiPqfd667jxAagxqD-kFhpIyxhh_fGB9MbXk&skey=db4d85f0f9937532&v=v19) format('woff2');
    unicode-range: U+2190-2199;
}

.plex{
  font-size:10vmin;
  font-family: 'IBM Plex Sans', sans-serif;
}
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">

<p class="plex">IBM Plex  &#x2190; &#x2191; &#x2192; &#x2193; &#x2194; &#x2195; &#x2196; &#x2197; &#x2198; &#x2199;</p>

显然,您的字体家族必须包含这些字形。
这里有一个例子显示Fira Sans,它只包括左,右,下和上的自定义箭头。

body{
  font-size:5em;
}

/** only arrows */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=zYXgKVElMYYaJe8bpLHnCwDKtdPMD6au90cJiPqfd667jxAagxqD-kFhpIyxhh_fGB9MbXk&skey=db4d85f0f9937532&v=v19) format('woff2');
    unicode-range: U+2190-2199;
  
}

@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=va9E4kDNxMZdWfMOD5VflZrQo7FvltpfdcxE__9bajWcrTZbAYeEiQH32WSGeTxr&skey=6bde03e5f15b0572&v=v17) format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/l/font?kit=memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4ie0ncQzny-KClHo_cmBsJhSfL3UJDJude6GUbURQncdQ&skey=62c1cbfccc78b4b2&v=v35) format('woff2');
}


.plex{
  font-family: 'IBM Plex Sans', sans-serif;
}

.fira{
  font-family: 'Fira Sans', sans-serif;
}

.openSans{
  font-family: 'Open Sans', sans-serif;
}
<!--
-->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans" rel="stylesheet">

<p class="default">Default unicode characters  &#x2190; &#x2191; &#x2192; &#x2193; &#x2194; &#x2195; &#x2196; &#x2197; &#x2198; &#x2199;</p>

<p class="plex">IBM Plex  &#x2190; &#x2191; &#x2192; &#x2193; &#x2194; &#x2195; &#x2196; &#x2197; &#x2198; &#x2199;</p>

<p class="fira">Fira Sans  &#x2190; &#x2191; &#x2192; &#x2193; &#x2194; &#x2195; &#x2196; &#x2197; &#x2198; &#x2199;</p>

相关问题