我必须在作为字体的图标上创建描边效果。我已经尝试过文本阴影技术,但问题是它变得非常不稳定,所以我最终做的是将轮廓与图标分开并将其导出为字体,然后再次将它们相互合并。
它现在完美运行了!...只是不在 IE 中。
除了向大家展示之外,我不确定我能更好地解释我的问题: 自定义字体在 jsfiddle 中不起作用,所以我暂时将它上传到 - http://babysignlanguage.co.za/icon_fonts/
代码如下:
CSS:
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
body {background:#99FFCC;}
.menu_icon_gen {font-size: 6em; font-family: 'icomoon';}
.space { letter-spacing:-2em; zoom:1;}
.left {float:left;}
.green {color:#ACBB72;}
.white {color:#FFF;}
HTML
<div class="menu_icon_gen" aria-hidden="true">
<span class="green space left"></span>
<span class="white"></span>
<div class="menu_icon_gen" aria-hidden="true">
<span class="green space left"></span>
<span class="white"></span>
</div>
最佳答案
我将 position: relative
赋予了 div
,并将 position: absolute
赋予了 span
。
适用于 IE 9。
关于html - 图标字体无法在 Internet Explorer 中使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15152498/