[分享]css中字体如何在图片中显示不出来

在网页制作中，有时候我们会使用图片来呈现一些特殊的字体，但是当网页中出现图片无法正常显示的情况，该如何处理呢？下面我们来看看css中字体该如何在图片中正常显示。fontface { fontfamil...

在网页制作中，有时候我们会使用图片来呈现一些特殊的字体，但是当网页中出现图片无法正常显示的情况，该如何处理呢？下面我们来看看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等常用字体图标库，它们已经为我们提供了现成的字体图片，只需要按照它们的规则应用即可。