了解SCSS

Question

首先，我想提一下图标字体不是免费提供的。我们实际购买了它们。

我有一个SCSS文件，它引用了一些图标字体。我得到了大部分内容，但不确定看似十六进制的值是什么意思。

$icomoon-font-path: "../fonts" !default;

$stream-check-1: "\e62f";
$stream-check-circle-1: "\e634";

然后我似乎有引用这些值的CSS类：

@font-face {
    font-family: 'myicon';
    src:    url('#{$icomoon-font-path}/streamline.eot?l1dykt');
    src:    url('#{$icomoon-font-path}/streamline.eot?l1dykt#iefix') format('embedded-opentype'),
        url('#{$icomoon-font-path}/streamline.ttf?l1dykt') format('truetype'),
        url('#{$icomoon-font-path}/streamline.woff?l1dykt') format('woff'),
        url('#{$icomoon-font-path}/streamline.svg?l1dykt#streamline') format('svg');
    font-weight: normal;
    font-style: normal;
}

.myicon-check-1 {
    &:before {
        content: $stream-check-1;
    }
}

我想我得到了大部分内容。我的问题是我从哪里获得这些十六进制值，例如e62f？

更新： 我找到了一些在文件中压缩的json文件，提到了icomoon。在这种情况下，这些json文件会有任何帮助吗？它们看起来像这样：

Answer 1

对于HTML中的"\e62f"，

为CSS syntax：具有十六进制代码e62f的字符。您可以通过检查字体文件来查看代码到字形的映射（根据您使用的操作系统，执行此操作的方式会有所不同）。

Answer 2

我想我在这里找到了正确的解决方案。这是一个在线字体查看器，当我点击字体时，它会显示指定的值。

Just drag and drop the font file and 
it shows you the fonts and their values.

http://jsfiddle.net/iegik/r4ckgdc0/

Answer 3

这些是utf-8图标。您可以查看here。 要进一步查找，请检查this。

Answer 4

e62f实际上指的是utf-8字符编码。 HTML采用了＃34;代码＆＃34;并根据您的编码将其转换为字母。我所知道的大多数美国网站只是utf-8

在您的情况下，您的webfont已替换了一些正常值，以便使用它们自己的版本。但是，您可能无法找到此字体中其他代码的确切列表，因为它是Icomoon字体（似乎是） - 它允许人们制作自己的webfont。

修改

因此，如果您已下载字体并拥有Mac - 请打开Font Book应用程序。从那里，找到你的字体并查看所有字符。选择您要查找的角色并复制它。

转到此网站的工具：http://r12a.github.io/apps/conversion/

将您的角色粘贴到绿色转换区域。

您要查找的值将在css框中！ （当然它会在本网站上显示为一个方框，但只要您在下载字体的网站上使用该代码，您就会看到它与您在Font Book中看到的相匹配）

我能够使用自己的自定义字体重现这一点 - 所以我能够使它工作。这是一个很好的问题，帮助我找到了一个我肯定要预订的工具！干杯！