在网页制作中,有时候我们会使用图片来呈现一些特殊的字体,但是当网页中出现图片无法正常显示的情况,该如何处理呢?下面我们来看看css中字体该如何在图片中正常显示。@font-face { font-fa
在网页制作中,有时候我们会使用图片来呈现一些特殊的字体,但是当网页中出现图片无法正常显示的情况,该如何处理呢?下面我们来看看css中字体该如何在图片中正常显示。
@font-face { font-family: 'myFont'; src: url('myFont.ttf'); /* 自定义字体路径 */ } .font-demo { font-family: 'myFont', 'Impact', Sans-serif; /* 使用自定义字体 */ font-size: 48px; color: #f00; } .img-demo { background-image: url('myFont.png'); /* 自定义字体的图片路径 */ text-indent: -9999px; padding: 0; margin: 0; width: 200px; height: 100px; line-height: 100px; display: block; }
通过上面样例代码中的@font-face和.font-demo样式可以实现自定义字体的使用,当然需要配合该字体的ttf文件,这里不再赘述。可是如果使用上述方法的话,文字还得按一定大小和颜色放置在网页上,这样的话,就不太友好了。
不过,还有另一种方法可以解决这个问题。通过在图片上放置文本,并将文本向左缩进,然后将它的宽度和高度值设置成图片的宽度和高度值,这样就可以显示自定义字体了。代码中的.img-demo样式就是这样实现的,当然,你得自己在图片上写好要显示的文本。
当然,现在也有更为简便的方法来解决这个问题,即使用字体图标库,像Font Awesome、Iconfont等常用字体图标库,它们已经为我们提供了现成的字体图片,只需要按照它们的规则应用即可。
粉丝
0
关注
0
收藏
0