如何在浏览器中使用 marvosym 等符号字体？答案

【问题标题】：How can I use symbol fonts like marvosym in the browser?如何在浏览器中使用 marvosym 等符号字体？
【发布时间】：2015-04-24 18:57:49
【问题描述】：

我想使用一些在 LaTeX 中使用的特殊字体。例如，我想显示来自marvosym 的\Pluto：

如何在不使用图像的情况下使用 HTML / JavaScript / CSS 显示此符号？

字体可以从http://www.marvosym.com/download.html下载

在那个字体中是符号 201。

我试过了

<p style="font-family: 'marvosym'">&#201;</p>

使用 Chrome，但它只显示 É（我已安装此字体；fc-list | grep marvosym 显示它）

【问题讨论】：

根据lalit.org/lab/javascript-css-font-detect，没有安装marvosym。我是否必须重新启动我的系统，以便 chrome “检测到”我的系统上安装了 mavosym？

标签： javascript html css fonts

【解决方案1】：

您可以以标准 CSS 方式链接字体，如以下答案：https://stackoverflow.com/a/13585273/1161631

我实际上建议至少提供 TTF/OTF 和 WOFF 格式，因为它们似乎有很好的覆盖面，请参阅@font-face on w3schools。

那么您应该可以使用&#201; 访问存储在插槽中的符号。但是，请记住，这是对 unicode 插槽的滥用，不会正确复制粘贴，并且在字体无法正确加载的情况下，后备会显示一些无意义的内容。

如果您有marvosym.woff，则以下示例适用于许多浏览器：

<html>
<head>
    <style>
        @font-face {
            font-family: 'marvosym';
            src: 
            url('marvosym.woff') format('woff');
        }
    </style>
</head>
<body>
    <p style="font-family: marvosym">&#201;</p>
</body>
</html>

【讨论】：