陰影文本：CSS還是圖形？

Question

我有一個內部網頁應用程序，在頁面頂部有一個圖像，當前包含一些帶陰影的英文文本。我現在需要爲各種語言提供本頁面的本地化版本。我的主要選擇是：

• 對於每種支持的語言，包含本地化文本都有不同的圖形。
• 使用CSS將本地化文本放置在純文本圖像上，使用complex CSS technique可以在大多數當前瀏覽器中獲取放置陰影。

還有其他的選擇嗎？這是針對教育環境的，我無法控制學生使用的瀏覽器。

我曾嘗試刪除圖形中的陰影，並將文本移動到HTML中的標題中，但都沒有吸引力。人們說它看起來像是當前頁面的廉價仿製品，這讓我感到很自豪。

Answer 1

就我個人而言，我是像這樣的視覺效果的CSS技術的粉絲。最大的好處是您可以將處理效果卸載到客戶端，從而節省帶寬和內容創建時間（每個語言環境的自定義文本圖像都是一個大訂單！），併爲用戶提供更快的下載頁面。

避免它的唯一原因是，如果您絕對必須在非常老的（IE5）瀏覽器上放置陰影，並且旁邊沒有CSS支持。

編輯：只是想到了一些東西 - 我喜歡這種情況下，我需要一個特定的字體或一些確切的文字效果的情況我已經使用PHP來渲染具有特效的文本，並將其緩存到服務器端。這樣您可以避免內容創建過程，並獲得更寬的瀏覽器支持來交換帶寬和服務器CPU時間。如果權衡是可以接受的，那就是你的呼叫。

Answer 2

爲請求服務器端生成每種語言的圖像，並添加陰影。根據需要緩存它們。

如果你可以使用難懂的，你可以refer to this tutorial生成文本+陰影...

Answer 3

保持與文本圖像可以是一個痛苦 - 即使沒有本地化，我會避免。

兩種選擇，我會之前，你的選擇會嘗試是：

• 尋找產生下拉陰影圖像的免費程序，你可以有你的程序使用只要檢測到新的文本也支持標題
• 使用可重複的背景圖像文本

如果這些不工作下方的陰影圖像，我想嘗試的CSS，但你可以在儘可能多的瀏覽器測試在與它一起生活之前你自己。

Answer 4

那麼，Safari支持一個專有的CSS屬性的陰影，但它不會在其他瀏覽器中工作。 CSS3也會有陰影（實際上只有一個用於框，但也可用於文本，例如當框具有透明背景時）。

但是看到大多數瀏覽器到目前爲止還沒有100％的CSS2支持，我想你需要選擇其中的一種。當然，還有一個不那麼複雜的CSS技巧獲得陰影：

Drop Shadows for Everyone

但他們不看像你一樣真實的陰影，因爲它們不是模糊。此外，您需要在HTML中使用兩次文本才能正常工作。