如果我有一个生成的图标字体作为TTF,我可以告诉哪个CSS内容属性属于哪个字符? [英] If I have a generated icon-font as TTF, can I tell which CSS content-property belongs to which character?

查看:249
本文介绍了如果我有一个生成的图标字体作为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内容属性属于哪个字符?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆