跨瀏覽器文本中風和模糊

所以我試圖讓一個網頁上發生的Photoshop文本效果。基本上文字是白色的，在筆畫外還有一個純色的黑色輪廓和白色的模糊。跨瀏覽器文本中風和模糊

跨瀏覽器地獄！

我一直在玩各種文字陰影，文字筆畫和毫秒過濾器，但只是無法獲得在所有瀏覽器中看起來一致的內容。 Firefox顯示大綱，但它是灰色的，似乎無法得到在IE中工作的過濾器組合。這是我的努力之一：

color: #FFF; 
-webkit-text-fill-color: white; 
-webkit-text-stroke-width: 2px; 
-webkit-text-stroke-color: black; 
text-shadow: 1px 1px 4px #ffffff, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
letter-spacing: -3px; 
font-style: italic; 
filter: glow(color=black,strength=1);

我也在@fontface中使用嵌入字體。

有誰知道jQuery的解決方案，可能讓我風格這個文本？我真的不想訴諸圖像，因爲在整個網站中使用文本樣式。

任何建議，非常感謝！

< ----------------編輯----------------->

太真我是一個小模糊。超級晚上昨晚，並希望有一個神奇的jQuery解決方案或類似的東西。我還沒有使用過SVG文本，所以我今天上午肯定會嘗試一下，因爲它看起來會處理大多數流行的瀏覽器。

據我所知，Photoshop和網頁設計有很大的不同，但我提供了PSDs，並且必須盡我所能建立一個網站。

我在Mac上工作並通過Virtual Box測試IE。目前我使用IE9，但現在有一個IE10的副本下載進行進一步測試。

這是我想要達到一個jpg例如：

This is a jpg example of what I'm trying to achieve

來源

2013-10-01 user892670

您不應該期望在網頁瀏覽器中重現Photoshop效果。他們是非常不同的節目。關於特定的效果，您應該精確地指定它們，並使用圖像（或指向圖像的鏈接，使用永久性URL）併發布完整的可測試文檔，以顯示您迄今爲止做出的最大努力，並通過瀏覽器更準確地描述結果（例如「 IE「是一個非常模糊的參考 - IE 11 Preview，IE 10，IE 9或更老的東西？）。 –

正如其他人所建議的這將是困難的;它可能比它的價值更麻煩。另外，JQuery當然不是這份工作的正確工具。

正如你已經發現，text-shadow風格會給你背後的文字模糊。如果文本大綱是真的重要的是你，我會使用聯SVG爲：

<svg> 
    <text x="80" y="80" stroke="red" font-size="80px">Hi</text> 
</svg>

（見this fiddle跨瀏覽器兼容性聯SVG：。caniuse）

不幸的是，如果你使用內聯SVG，你不能使用CSS的text-shadow，所以你必須創建一個帶有feGaussianBlur的SVG過濾器。

來源

2013-10-01 05:47:05 Jeremy

跨瀏覽器文本中風和模糊

回答

相關問題