Question

我有一个.ttf图标字体，我丢失了指南。我可以在FontBook中查看完整的字符集。有没有办法找出我可以用来访问字体集中每个字符的CSS内容属性？

Answer 1

完成Diodeus＆＃39;回答，你必须在样式表中定义一个新的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的插入＆gt;中检查字体。符号＆gt;其他

Answer 2

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

.example { content: "\203A" }

另请参阅：Adding HTML entities using CSS content

Answer 3

您可以使用FontForge检查字体并查看该字形的各种表示法。

或者，如果将.ttf文件转换为.svg文件，则可以看到文件中每个字形的Unicode表示法。

然后您可以使用例如an entity converter找出Unicode表示法的ASCII表示，您可以将其用于CSS content:属性。

如果我有一个生成的图标字体作为TTF，我可以告诉哪个CSS内容属性属于哪个字符？

3 个答案: