Google 字体和跨浏览器 Unicode

Question

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

查看下图了解问题。有没有办法让它们在浏览器中看起来与在 Safari 中显示的一样？

Answer 1

2017 年 4 月 21 日更新

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

自己生成 font-icon 类似 https://icomoon.io/app/#/select/

的 application

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

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

原创遮阳棚

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

在您的 header 中包含 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/

Google 字体和跨浏览器 Unicode

Google fonts and cross-browser Unicode

css

unicode

fonts

cross-browser

embedding

2017 年 4 月 21 日更新

原创遮阳棚