跨瀏覽器圖像

Question

因此，我決定在我的導航欄鏈接中使用圖像作爲文本，這樣我就可以使用我想要的字體，而不用擔心跨瀏覽器呈現問題。但我遇到了另一個跨瀏覽器問題。由於Internet Explorer的圖像調整大小問題，我需要從photoshop導出圖像，其高度和寬度與顯示的高度和寬度相同。但是現在在我的圖像周圍有一些白色的像素化邊界（見圖）。我的購物車圖標也受到影響。 screenshot of my navbar

Answer 1

使用圖像而不是文字，因爲您想避免跨瀏覽器問題不是一個好方法。您應該使用CSS的@ font-face規則

`@font-face{ 
font-family: 'pick your font'; 
src: url("your_font.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') 
     ;} 

字體松鼠是那些白線出現，因爲圖像是不夠的，當尖銳的良好來源獲得免費的字體文件（所有格式）

而且你給他們上色。當您嘗試調整小圖像的大小並更改其顏色時，通常會發生這種情況。