我正在尝试在网页上使用Source Code Pro字体,同时还想显示出其样例页面中漂亮的箭头。我使用Google Fonts在我的网页中引用该字体,但在Google Fonts的相应页面中没有列出这些箭头。但是,如果你从样例页面或htmlarrows.com中复制/粘贴一些箭头,它们会以我期望的方式显示出来。
当我按照Google Fonts告诉我在我的网页上使用该字体时,所有其他文本都变成了Source Code Pro,但箭头却回到了系统默认字体(对我而言是Arial)。
以下是示例:
当我在Google Fonts网站上将字体添加到我的捆绑包中时,它允许我导入拉丁版或拉丁扩展版,切换到扩展版似乎对我的使用情况没有任何影响。
我尝试了更改如何导入字体,从@import到,尝试更改如何引用Unicode字符为←或←,但似乎没有什么效果。
当我按照Google Fonts告诉我在我的网页上使用该字体时,所有其他文本都变成了Source Code Pro,但箭头却回到了系统默认字体(对我而言是Arial)。
以下是示例:
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
.container {
border-collapse: collapse;
}
td {
font-size: 96px;
}
td, th {
border: 0.1rem solid #c3c3c3;
padding: 0.5rem;
}
.row-sans-serif {
font-family: sans-serif;
}
.row-source-code-pro {
font-family: 'Source Code Pro', sans-serif;
}
<table class="container">
<thead>
<tr>
<th>font-family</th>
<th>A</th>
<th>Left</th>
<th>Right</th>
</tr>
</thead>
<tbody>
<tr class="row-sans-serif">
<th>sans-serif</th>
<td>A</td>
<td>←</td>
<td>→</td>
</tr>
<tr class="row-source-code-pro">
<th>Source Code Pro</th>
<td>A</td>
<td>←</td>
<td>→</td>
</tr>
</tbody>
</table>
我尝试了更改如何导入字体,从@import到,尝试更改如何引用Unicode字符为←或←,但似乎没有什么效果。