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

问题描述

我有一个.ttf图标字体，我已经失去了指南。我能够在FontBook中查看完整的字符集。有什么方法可以找出哪些CSS内容属性，我可以用来访问字体集中的每个字符？

解决方案

为了完成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：在{
 content：'\0061'; //在这里设置正确的字符索引
 
 .my-icons.some-other-symbol：在{
 content：'\0064'; //在这里设置另一个适当的字符索引
} 
  

$ b $ < span> pre> < p>以下是一些符号：< span class =my-icons some-symbol>< / span>
和其他一些< i class =我的图标some-other-symbol>< / i>< / p>


要了解字符索引，可以在Word的插入>符号>其他

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?

解决方案

To complete Diodeus' answer, you have to define a new font-face in your stylesheet :

@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 
}

Then use the defined styles in a dummy <span> or <i> tag:

<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>

To find out about the characters indexes, you can inspect your font in Word's Insert > Symbol > Other

这篇关于如果我有一个生成的图标字体作为TTF，我可以告诉哪个CSS内容属性属于哪个字符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！