我使用IBM Plex Sans从谷歌字体,但字符作为左/右箭头呈现不同,然后其他符号。问题出现在Chrome,New Edge,Opera,Safari,Firefox上,但Internet Explorer 11很好。图片:
问题出在哪里?
wlp8pajw1#
您可以找到Unicode箭头并将参数添加到相关的Google Fonts URL。Here是详细说明。
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规则,以便除了常规加载的子集合之外,还加载箭头符号
@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 ← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙</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 ← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙</p> <p class="plex">IBM Plex ← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙</p> <p class="fira">Fira Sans ← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙</p>
2条答案
按热度按时间wlp8pajw1#
您可以找到Unicode箭头并将参数添加到相关的Google Fonts URL。Here是详细说明。
pbwdgjma2#
显然,尽管IBM Plex支持,但Google字体API并不返回此Unicode范围的字形。
解决方案一:下载“完整”字体
Google字体UI包括一个“下载系列”按钮,用于下载完整的trutype/ttf字体系列。
您可以下载这些文件并将它们作为本地托管的字体源加载。
**缺点:**由于truetype压缩效率较低,这些文件非常大。
你可以通过像transfonter这样的工具将它们转换为woff 2,但是字体仍然非常大,因为它包含了所有可用的字形。
解决方法二:通过
&text
查询参数创建自定义子集获取包含所有箭头字形的子集,如下所示:
输出CSS:
现在,我们可以添加
@font-face
规则,以便除了常规加载的子集合之外,还加载箭头符号显然,您的字体家族必须包含这些字形。
这里有一个例子显示Fira Sans,它只包括左,右,下和上的自定义箭头。