Question

所以我决定在我的导航栏链接中使用图像，这样我就可以使用我想要的字体而不用担心跨浏览器渲染问题。但我遇到了另一个跨浏览器问题。由于Internet Explorer的图像调整大小问题，我需要从photoshop导出图像，其高度和宽度与显示时相同。但是现在我的图像周围有一个白色的像素化边框（见图）。我的购物车图标也受到影响。 screenshot of my navbar

Answer 1

使用图片而不是文本是因为您希望避免跨浏览器问题，这不是一个好方法。您应该使用css @ font-face rule

`@font-face{
font-family: 'pick your font';
src: url("your_font.otf");}`

您需要下载所需字体的.otf和.eot文件并将其上传到网站（不同的浏览器支持不同的字体格式集）。然后你可以像这样引用它们：

@font-face{
 font-family: 'your_font';
 src: url('your_font.eot?#iefix') format('embedded-opentype'),
       url('your_font.woff') format('woff'),
       url('your_font.ttf') format('truetype')
       ;}

Font squirrel是获取免费字体文件（所有格式）的好来源

这些白线也出现了，因为当你对它们进行着色时，图像不够清晰。当您尝试调整小图像并调整其颜色时，通常会发生这种情况。

跨浏览器图片

1 个答案: