Google字體和跨瀏覽器Unicode

Question

我正在我的一個項目中使用谷歌字體（ Source Sans Pro ）。 ::after我顯示箭頭::after ，我有一個班級在懸停::after 問題是除了Safari，Chrome和Firefox都顯示不同的符號。 我的意思是它是箭頭但是在兩個瀏覽器（Chrome和Firefox）中沒有使用默認的谷歌字體來呈現Unicode (2192) 。

請參閱下圖以了解該問題。 有沒有辦法讓它們在瀏覽器中看起來與Safari中出現的一樣？

Answer 1

---

更新21-04-2017

---

因為僅僅為一個箭頭包含整個庫有點過分。 我用更好的解決方案更新我的芒果。

使用某些application如https://icomoon.io/app/#/select/）自行生成font-icon

搜索disired font-icon （s）並下載生成的font 。 只需將font復制並粘貼到您的主機上即可。

如果你想保持一個干凈的結構或干凈的css文件。 您還可以將style.css的內容復制到所需的css文件中。

---

原始的awnser

---

那么使用字體圖標呢？ 喜歡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/