在iOS瀏覽器中應用於Google Web字體的文字陰影

我在應用於Google Web字體的標準文字陰影效果上遇到了問題。字體顯示加倍，字體顏色的兩層背後有陰影。這在我的非視網膜ipad mini上最爲明顯。我在筆記本瀏覽器上看不到這種行爲。在iOS瀏覽器中應用於Google Web字體的文字陰影

有關爲什麼會發生這種情況的任何建議？

這裏有一個示範易於輸入到瀏覽器的ios：http://j.mp/wfontios

現在，我只是有一個*選擇剝離文字陰影關閉使用媒體查詢較小的屏幕尺寸的所有文本。也許這個問題有更好的補丁。

下面是一個iPad迷你的屏幕截圖： photo.jpg http://crosby-generic-staging.s3.amazonaws.com/img/photo.JPG

截屏 Screen shot (iPhone 4S)

2013-02-05 sacrosby

請張貼您所引用效果的屏幕截圖，許多用戶將無法訪問iOS設備。 –

這很吸引人。我可以在另一個網站上覆制它。 iOS的偏移似乎是2x或4x – jurgemaister

我更新了我的答案 – jurgemaister

搜索沒有得到我的任何地方，它可能涉及到的百分比偏移相比，文本大小（當您將文本從32px縮放到20px時，2px是更大的分數）。你可以嘗試使用％來代替px，或者添加以下內容。

在你的CSS響應，加入

@media (max-width: 767px) { 
    text-shadow: text-shadow: -1px 1px 1px; 
}

這使得在較小的文本

編輯我看到你有一個截圖更新你的問題更好。這個偏移渲染錯誤可能與described here相同。問題似乎是您正在使用font-weight: bold，並且Mobile Safari無法處理它。解決方案似乎是將其設置爲正常。

/*reset for mobile browsers */ 
h1, h2, h3, h4, h5, h6 { 
    font-weight: normal; 
}

2013-02-05 08:52:02 jurgemaister

回答