[瀏覽器] 擺脫套件 用 CSS 也能在 Opera 成像出漂亮的字型

相信不少嘗試過 Opera 瀏覽器後都對那個可怕的中文字型為之卻步，模糊扭捏在一起的中文字型讓不少中文使用者對 Opera 留下不少壞印象。雖然目前藉助套件（和黑體字型）的幫助，你就可以成像出非常漂亮又好讀的字型，但是少一個套件就少一點負擔。本文就是要分享如何利用簡單的 CSS 代碼就完成 Mac OSX Font Rendering 的文字成像效果，享受漂亮的成果還可以為 Opera 瘦身。

警告：
使用 CSS 強制轉換網頁字型為某個單一字型會導致某些使用外連圖示字型的網站失效，同時也會造成使用等寬字型的編輯器出現游標錯位問題。較完美的解決方式為採取 font-face 來自訂字型，你可以在［這裡］取得 UserStyle（僅測試並支援 Firefox，很抱歉，我已經不使用 Opera 瀏覽器了）

@2013/09/01

回顧一下
之前為了讓 Opera 的字型看起來更好看一些（免得折磨自己的眼睛），就曾寫過如何利用 CSS 方式將網頁中的字型改成微軟正黑體，還有利用延伸套件的方式來加強文字的成像效果。但是套件或多或少都會加重 Opera 負擔，所以這次就一石二鳥，統統用 CSS 的方式來修改字型與成像文字。

• CSS 助你向難看的 Opera 字型說掰掰
• Opera 地表最靚瀏覽器 絕美字型無可挑剔

橫向比對
買車都要先試車了，為了加強讀者對這個方式的信心，先給各位看看「剛安裝好的原始 Opera」、「套用微軟正黑體 CSS」、「套用 CSS 文字成像」三種不同模式下的成果。看過下圖後是不是有種醜小鴨變天鵝的感覺呢？沒錯，你的 Opera 也可以辦到（當然，如果你用 Mac 的話就已經很漂亮了）。

↑請點開上圖預覽比對效果

CSS 檔說明
為了方便讀者實作，這裡提供三個已經寫好的 CSS 檔，讀者只要下載放到 Opera 的樣式資料夾中即可。提供三個 CSS 檔的目的就是讓使用者可以組合使用（譬如你只希望文字成像效果，或兩者都希望有）如果覺得預設的成像參數不太滿意，文末還會提供修改參數的方法給喜歡自訂的使用者參考。

開始實作之前，請先在〔這裡〕下載三個 CSS 檔案。

• CUM-MSJhenghei.css：強制網頁字型為微軟正黑體（微軟正黑體需自行搜尋）
• CUM-MSJhenghei&Bold.css：  強制網頁字型為微軟正黑體並加粗（和上面的擇一套用）  
• CUM-TextRender.css：使用 Text-Shadow 成像字體

安裝與套用
完成檔案下載後就可以開始把 CSS 檔案放置在 Opera 使用者的 CSS 資料夾中，然後就可以開啟 Opera 並套用 CSS 檔享受絢麗的文字成像效果了。開始吧！

1. 開啟 Opera 後，在網址列輸入「opera:about」，按下 Enter 進入程式資訊頁面。

2. 複製「Opera 目錄」資料夾路徑，這是存放 Opera 所有設定的地方。

3. 用視窗開啟剛剛複製的路徑，找到一個名為「styles」的資料夾並點進去。

4. 進入「styles」資料夾後，再點入「user」資料夾，接著把剛剛下載檔案解壓縮到這裡。

5. 關閉 Opera 並重新開啟（讓 Opera 載入 CSS 檔），透過〔O選單〕→〔頁面〕→〔樣式〕可以點選你要啟用的 CSS 樣式檔。

參數調整
成像的效果是利用「text-shadow」這個 CSS 的指令，你需要調整的項目有四個：「顏色，X軸陰影，Y軸陰影，成像濃度；」。顏色是使用 16 進位的方式表示，XY軸陰影不建議設定超過 1px（Y軸為負數），而濃度則不建議設定超過 2px。至於如何才是最適合你的參數就由讀者自己去嘗試了。

結語
透過一行簡單的 CSS 代碼就可以順利減少了一個套件的安裝（和依賴），相當划得來。而且考慮到有時 Mac OSX Font Rendering 會時染時不染的秀逗一下，套用 CSS 檔就穩定的多了。如果你也喜歡文字成像的效果，建議你也嘗試一下。 備註： 根據 Tous amour de I, tout que vous voulez 讀者的提醒，發現強制粗體對某些使用會造成困擾，所以取消提供整合字型和文字成像的整合檔案，並改為提供強制字型、強制字型並加粗，這兩個檔案擇一套用即可。另外一個文字成像效果，共三個 CSS 檔案。