2

I have a .ttf icon-font for which I have lost the guide. I am able to view the complete character set in FontBook. Is there any way to figure out which CSS content-property I can use to access each character in the font-set?

4

3 回答 3

3

要完成 Diodeus 的回答，您必须font-face在样式表中定义一个新的：

@font-face {
   font-family: 'MyIconsFont';
   src: url("res/icons/MyTrueTypeFont.ttf") format("truetype");
   font-weight: normal;
   font-style: normal
}
.my-icons {
   display: inline-block;
   font-family: 'MyIconsFont';
}
.my-icons.some-symbol:before {
   content: '\0061';  // Set the proper character index here
}
.my-icons.some-other-symbol:before {
   content: '\0064';  // Set another proper character index here 
}

然后在虚拟<span>或<i>标签中使用定义的样式：

<p>Here is some some symbol : <span class="my-icons some-symbol"></span> 
and some other <i class="my-icons some-other-symbol"></i></p>

要了解字符索引，您可以在 Word 的插入 > 符号 > 其他中检查您的字体

于 2014-03-21T12:54:38.213 回答
1

如果您知道字体中字形的 UTF-8 字符代码，则可以content:在 CSS 的声明中指定它：

.example { content: "\203A" }

另请参阅：使用 CSS 内容添加 HTML 实体

于 2013-10-22T17:58:49.393 回答
0

您可以使用FontForge检查字体并查看该字形的各种符号。

或者，如果您将 .ttf 文件转换为 .svg 文件，您可以看到文件中每个字形的 Unicode 符号。

然后，您可以使用例如实体转换器来找出 Unicode 表示法的 ASCII 表示，您可以将其用于 CSScontent:属性。

于 2015-11-24T22:01:35.577 回答