Google 字体和跨浏览器 Unicode答案

【问题标题】：Google fonts and cross-browser UnicodeGoogle 字体和跨浏览器 Unicode
【发布时间】：2016-04-22 09:45:50
【问题描述】：

我在我的一个项目中使用谷歌字体 (Source Sans Pro)。我有一堂课，悬停::after我显示一个箭头。问题在于 Safari、Chrome 和 Firefox 都显示不同的符号。我的意思是它是箭头，但默认的谷歌字体没有在两个浏览器（Chrome 和 Firefox）中用于呈现 Unicode (2192)。

请参阅下图以了解问题。有没有办法让它们在浏览器中看起来像在 Safari 中一样？

【问题讨论】：

技术细节：Source Sans 是 Adobe，而不是 Google。两者在这些字体上进行了合作，但 Adobe 管理发布，并将其发布为“源”。谷歌反过来将他们自己的品牌副本发布为“Noto”（他们会及时更新 Adobe 团队对 Source 所做的更改）。也就是说：你的 HTML 和 CSS 在哪里？在不显示您如何影响此文本的情况下，我们只能猜测，而猜测并不是很好的帮助。
这是h1::after {content:"\2192"; font-family: 'Source Sans Pro', sans-serif;}。我只能使用自定义字体对其进行排序。
不要将其添加为评论：您的帖子需要包含一些精简（但 minimal, complete, and verifiable）的 html 和 css，以便人们可以看到确切您在做什么.否则你会要求他们猜测你的问题 =)

标签： css unicode fonts cross-browser embedding

【解决方案1】：

2017 年 4 月 21 日更新

因为只为一个箭头包含整个库有点矫枉过正。我用更好的解决方案更新了我的遮阳篷。

使用某种application 自己生成font-icon，例如https://icomoon.io/app/#/select/

搜索不想要的font-icon(s) 并下载生成的font。只需将font 复制并粘贴到您的主机上，瞧。

如果您想保持干净的结构或干净的css 文件。您也可以将style.css 的内容复制到您想要的css 文件中。

原来的遮阳篷

使用字体图标怎么样？像 Font Awesome 之类的东西。如果是这样，您必须这样做。

在标题中包含 Font Awesome。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

而不是像这样为 ::after 元素制作 CSS。

.class:after {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
}

.class:hover:after {
    content: "\f178";
}

有关使用 Font Awesome 的详细信息，请访问：http://fortawesome.github.io/Font-Awesome/

https://jsfiddle.net/bgamsayq/

【讨论】：

我考虑过使用很棒的字体，但问题是我已经从谷歌嵌入了字体，并且对于一个图标添加新字体会有点“要求”网站性能。
确实如此。为此，有一个更简单的解决方案。创建您自己的字体图标并将其放在您的 style.css 中。为方便起见，有一个很棒的网站：icomoon.io/app/#/select 只需搜索箭头图像并生成字体图标。下载图标后，您只需将 icomoon style.css 的内容复制到您自己的 style.css 中即可。
感谢您的建议。这就是我最终所做的，以确保箭头在所有浏览器中显示相同。