如何在浏览器中使用像marvosym这样的符号字体？

Question

I would like to use some special fonts which are used in LaTeX. 我想使用在LaTeX中使用的一些特殊字体。 For example, I would like to display the \\Pluto from marvosym : 例如，我想显示来自marvosym的\\Pluto ：

在此处输入图片说明

How can I display this symbol with HTML / JavaScript / CSS without using an image? 如何在不使用图像的情况下使用HTML / JavaScript / CSS显示此符号？

The font can be downloaded from http://www.marvosym.com/download.html 可以从http://www.marvosym.com/download.html下载该字体

It is symbol 201 in that font. 该字体是符号201。

I tried 我试过了

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

with Chrome, but it only showed É (I have installed this font; fc-list | grep marvosym shows it) Chrome，但只显示É（我已经安装了这种字体； fc-list | grep marvosym显示了它）

Answer 1

You can link the font in a standard CSS way, as in this answer: https://stackoverflow.com/a/13585273/1161631 您可以按照标准的CSS方式链接字体，如下所示： https : //stackoverflow.com/a/13585273/1161631

I would actually recommend providing at least TTF/OTF and WOFF formats, since they seem to have a good coverage together, see @font-face on w3schools . 实际上，我建议至少提供TTF / OTF和WOFF格式，因为它们似乎覆盖在一起很好，请参阅w3schools上的@font-face 。

Then you should be able to use É 然后，您应该可以使用É to access the symbol stored in the slot. 访问存储在插槽中的符号。 However, remember that this is an abuse of the unicode slots, will not copy-paste properly, and a fallback will show some non-sense in case the font doesn't load properly. 但是，请记住，这是对unicode插槽的滥用，不会正确地粘贴粘贴，并且在字体无法正确加载的情况下，回退会显示一些废话。

If you have a marvosym.woff the following example will work in many browsers: 如果您有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>

如何在浏览器中使用像marvosym这样的符号字体？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-02-23 13:11:24

如何在浏览器中使用像marvosym这样的符号字体？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-02-23 13:11:24

解决方案1
1 已采纳 2015-02-23 13:11:24