PTT數位生活區 / Browsers (瀏覽器)

[-OP-] 擺脫套件 用 CSS 也能在 Opera 渲染出먠…

看板Browsers (瀏覽器)作者 (t7: 近 Opera 者赤)時間15年前 (2011/04/25 02:24), 編輯推噓7(7推 0噓 30→)
留言37則, 9人參與, 最新討論串1/1
ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ 擺脫套件 用 CSS 也能在 Opera 渲染出漂亮的字型 撰寫日 4/25/2011 作者： 昜 via: http://t7yang.blogspot.com/2011/04/use-css-render-text-in-opera.html 相信不少嘗試過 Opera 瀏覽器後都對那個可怕的中文字型為之卻步，模糊扭捏在一起的 中文字型讓不少中文使用者對 Opera 留下不少壞印象。雖然目前藉助套件（和黑體字型 ）的幫助，你就可以渲染出非常漂亮又好讀的字型，但是少一個套件就少一點負擔。本文 就是要分享如何利用簡單的 CSS 代碼就完成 Mac OSX Font Rendering 的文字渲染效果 ，享受漂亮的成果還可以為 Opera 瘦身。 回顧一下 之前為了讓 Opera 的字型看起來更好看一些（免得折磨自己的眼睛），就曾寫過如何利 用 CSS 方式將網頁中的字型改成微軟正黑體，還有利用延伸套件的方式來加強文字的渲 染。但是套件或多或少都會加重 Opera 負擔，所以這次就一石二鳥，統統用 CSS 的方式 來修改字型與渲染文字。 ．CSS 助你向難看的 Opera 字型說掰掰 ．Opera 地表最靚瀏覽器 絕美字型無可挑剔 橫向比對 買車都要先試車了，為了加強讀者對這個方式的信心，先給各位看看「剛安裝好的原始 Opera」、「套用微軟正黑體 CSS」、「套用 CSS 文字渲染」三種不同模式下的結果。 看過下圖後是不是有種醜小鴨變天鵝的感覺呢？沒錯，你的 Opera 也可以辦到（當然， 如果你用 Mac 的話就已經很漂亮了）。 ↑請點開上圖預覽比對效果 CSS檔說明 為了方便讀者實作，這裡會提供三個已經寫好 CSS 檔，讀者只要下載放到 Opera 的樣式 資料夾中即可。提供三個 CSS 檔的目的就是讓使用者可以組合使用（譬如你只希望文字 渲染效果，或兩者都希望有）如果覺得預設的渲染參數不太滿意，文末還會提供修改參數 的方法給喜歡自訂的使用者參考。開始實作之前，請先在［這裡］下載三個 CSS 檔案。 ．MSJhenghei.css：將字型修改為微軟正黑體（這裡不提供微軟正黑體） ．TextRender.css：使用 CSS 渲染文字 ．MSJhenghei&TextRender.css：將上述兩種功能整合為一個檔案，一次搞定 安裝與套用 完成檔案下載後就可以開始把 CSS 檔案放置在 Opera 使用者的 CSS 資料夾中，然後就 可以開啟 Opera 並套用 CSS 檔享受絢麗的文字渲染效果了。開始吧！ ．開啟 Opera 後，在網址列輸入「opera:about」，按下 Enter 進入程式資訊頁面。 ．複製「Opera 目錄」資料夾路徑，這是存放 Opera 所有設定的地方。 ．用視窗開啟剛剛複製的路徑，找到一個名為「styles」的資料夾並點進去。 ．進入「styles」資料夾後，在點入「user」資料夾，接著把剛剛下載檔案解壓縮到這裡 。 ．關閉 Opera 並重新開啟（讓 Opera 載入 CSS 檔），透過［O選單］→［頁面］→［樣 式］可以點選你要啟用 CSS 樣式檔。 參數調整 渲染的效果是利用「text-shadow」這個 CSS 的效果，你需要調整的項目有四個：「顏色 ，X軸陰影，Y軸陰影，渲染濃度；」。顏色是使用 16 進位的方式表示，XY軸陰影不建議 設定超過 1px（Y軸為負數），而濃度則不建議設定超過 2px。至於如何才是最適合你的 參數就由讀者自己去嘗試了。 結語 透過一行簡單的 CSS 代碼就順利減少了一個套件的安裝（依賴），相當划得來。而且考 慮到有時 Mac OSX Font Rendering 會時染時不染的秀逗一下，套用 CSS 檔就穩定的多 了。如果你也喜歡文字渲染的效果，建議你也嘗試一下。 ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ 這篇是不久前因為 Mac OSX Font Rendering 時好時壞 讓我氣不過 就自己想辦法看可用不可以用 CSS 檔取代掉它 發現確實可以 分享出來給板友們知道 喜歡的話就動手試試吧 ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ｔ７ -- Jedi 語錄： ※「先講究不傷身體，再講究效果」的五洲製藥理念，也是三太子的理念，更是三太子 與全世界不計其數的其他 Opera 客製化專案最大的不同之處。 ↑t7自訂Opera的重要思維 ↓你我都有的共同經歷 ※Opera 就像哈比人一樣，在你以為跟他熟識多年之後，他仍然會帶給你莫大的驚喜。 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.113.230.27
推
04/25 02:54, , 1F
推啊！ Opera的字現在清晰多了！
04/25 02:54, 1F
推
04/25 12:29, , 2F
我是覺得不一定要用微軟正黑體 設成inherit(繼承)就夠了
04/25 12:29, 2F
→
04/25 12:30, , 3F
這樣基本上會套用瀏覽器的預設文字 彈性比較大
04/25 12:30, 3F
→
04/25 12:53, , 4F
我提供三個檔案啊 有一個是只有渲染效果的 沒有套用字型
04/25 12:53, 4F
推
04/25 13:19, , 5F
一直有用mactype+正黑，所以沒覺得OP字是多難看~
04/25 13:19, 5F
→
04/25 13:30, , 6F
用了以後，字真的變漂亮很多~~ 就又換回微軟正黑體了XDD
04/25 13:30, 6F
→
04/25 13:46, , 7F
有種可以做成opera widget的感覺(逃)
04/25 13:46, 7F
→
04/25 14:27, , 8F
這個包裝一下應該就可以變成一個 Extension 了吧 XDD
04/25 14:27, 8F
推
04/25 14:32, , 9F
一直在用Mactype+1~不過這對CPU負擔滿大的
04/25 14:32, 9F
→
04/25 14:47, , 10F
是可以啦... 只是因為你又說extension的額外負擔XD
04/25 14:47, 10F
→
04/25 14:51, , 11F
http://tinyurl.com/4xu4zf3 我是想到這篇
04/25 14:51, 11F
→
04/25 14:52, , 12F
不過這是透過injected script(類似userjs)去加入css
04/25 14:52, 12F
→
04/25 14:53, , 13F
而我說的opera widget，是想說使用者選擇目錄
04/25 14:53, 13F
→
04/25 14:53, , 14F
XD 就拿來當作學習如何製作套件 有時間再拿來玩玩 哈
04/25 14:53, 14F
→
04/25 14:53, , 15F
然後widget就幫忙把東西寫入那個目錄
04/25 14:53, 15F
→
04/25 15:08, , 16F
有這種widget嗎? 那個prototypes抓下來改一改就變套件了！
04/25 15:08, 16F
→
04/25 15:10, , 17F
目前是沒有啦... 純粹我的想像XD
04/25 15:10, 17F
→
04/25 15:13, , 18F
不過目前widget已經改為跟系統結合了 所以不是很喜歡用...
04/25 15:13, 18F
→
04/25 15:21, , 19F
似乎是一個獨立的系統，但是使用Opera的引擎這樣XD
04/25 15:21, 19F
→
04/25 15:58, , 20F
我倒是蠻喜歡widget的轉變...可做Execute Program的按鈕
04/25 15:58, 20F
→
04/25 15:58, , 21F
只是還是有點麻煩就是了
04/25 15:58, 21F
→
04/25 20:04, , 22F
我認為是為了因應延伸套件而做的角色改變
04/25 20:04, 22F
推
04/25 21:06, , 23F
精華文章，有看有推。:p
04/25 21:06, 23F
推
04/25 23:40, , 24F
Mac OSX Font Rendering其實也只是用CSS作渲染的啊 XD
04/25 23:40, 24F
→
04/25 23:41, , 25F
只是它把css直接放進js檔了 所以乍看之下似乎找不到而已
04/25 23:41, 25F
→
04/25 23:41, , 26F
body {text-shadow: 0em 0em 0.04em #909090 !important;}
04/25 23:41, 26F
→
04/25 23:42, , 27F
上面是Mac OSX Font Rendering的設定值 適用的方式不同
04/25 23:42, 27F
→
04/25 23:42, , 28F
不過只應用到body這點不錯 畢竟瀏覽器也只看的到寫在body裡的
04/25 23:42, 28F
→
04/25 23:45, , 29F
嗯 沒錯啊 只是最近這個套件在我這裡時好時壞 看了很不爽
04/25 23:45, 29F
→
04/25 23:46, , 30F
而且套件的參數是寫死的 不能改，CSS 就自由很多了
04/25 23:46, 30F
→
04/25 23:50, , 31F
發呆了一下才理解樓上的意思XD
04/25 23:50, 31F
→
04/25 23:51, , 32F
是說參數是寫在套件裡面的XD
04/25 23:51, 32F
→
04/25 23:56, , 33F
對啊 雖然說解壓後改完再壓回去也可以啦 XD
04/25 23:56, 33F
→
04/25 23:57, , 34F
但是這樣搞就不套件了
04/25 23:57, 34F
→
04/26 00:06, , 35F
是因為套件可以寫一個options.html的網頁
04/26 00:06, 35F
→
04/26 00:16, , 36F
可是這個套件的開發者似乎沒給選項 有點打混 XD
04/26 00:16, 36F
推
04/26 00:32, , 37F
這方法怎麼記得以前看過 = =a
04/26 00:32, 37F
‣ 更多 t7yang 的文章
文章代碼(AID): #1Dj6htaP (Browsers)
Browsers 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 t7yang 的文章
文章代碼(AID): #1Dj6htaP (Browsers)