Editing Enlarge the font size on a web page

放大網頁上的字體大小


== 臨時放大字體大小 ==
單一網頁上的字體大小臨時放大，重新整理(reload)網頁後會恢復。

* {{Gd}} [http://blog.planetoid.info/2007/03/bookmarklet-for-firefox.html 增加網頁易讀性的瀏覽器按鈕(bookmarklet)]  for {{Fx}} & {{Chrome}} (change the colors and enlarge font size): 將網頁樣式設定為白底黑字, 並且放大字體大小。(modified from Jesse Ruderman's [http://www.squarefree.com/bookmarklets/zap.html zap white backgrounds], 若要轉載，請注意其[http://www.squarefree.com/bookmarklets/copyright.html 授權須知]。)
<pre>
javascript:(function(){var newSS, styles='* { background: white ! important; color: black !important; line-height: 160% !important; font-size: 12pt !important; letter-spacing:2px !important } :link, :link * { color: #0000EE !important } :visited, :visited * { color: #551A8B !important }'; if(document.createStyleSheet) { document.createStyleSheet(%22javascript:'%22+styles+%22'%22); } else { newSS=document.createElement('link'); newSS.rel='stylesheet'; newSS.href='data:text/css,'+escape(styles); document.getElementsByTagName(%22head%22)[0].appendChild(newSS); } })();
</pre>

* 點選按鍵 {{kbd | key=Ctrl}} + {{kbd | key=+}} ，放大網頁內容的文字大小。{{Chrome}}, {{Fx}}, {{IE}}, {{Safari}}等瀏覽器，會記住該網站妳偏好的字型大小的設定。如果要重設大小，按 {{kbd | key=Ctrl}} + {{kbd | key=0}}。 詳 [http://www.google.com/support/chromeos/bin/answer.py?hl=zh-Hant&answer=96810 變更文字、圖片和影片大小 (縮放) : 網頁內容設定] for {{Chrome}}

* [http://www.squarefree.com/bookmarklets/zap.html Bookmarklets for Zapping Annoyances] --> zap style sheets (for {{IE}}, {{Fx}}): 忽略網頁設定樣式，達到放大字體大小的效果。 (last visited: 2007-01-04)
* [http://brownywalking.blogspot.com/2009/02/tip-comfortable-reading.html Browny Walking: 紙本換螢幕 眼睛也要顧 – comfortable reading]: 網頁改成黑底黃字顯現，行距 和 字距也都加大了 (modified from Jesse Ruderman's work and MozillaTW community's [http://forum.moztw.org/viewtopic.php?p=112079 discussion])

* [https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc Evernote Web Clipper] for {{Chrome}} & [https://addons.mozilla.org/zh-TW/firefox/addon/evernote-web-clipper/?src=api Evernote Web Clipper :: Firefox 附加元件]  for {{Fx}}

* [https://chrome.google.com/webstore/detail/ireader/ppelffpjgkifjfgnbaaldcehkpajlmbc?utm_source=chrome-app-launcher-info-dialog iReader] for {{Chrome}} & [https://addons.mozilla.org/zh-tw/firefox/addon/ireader/ iReader :: Firefox 附加元件] for {{Fx}}

* [https://www.wikihow.tech/Zoom-in-on-a-Mac 3 Ways to Zoom in on a Mac] {{Mac}}

== 總是放大字體大小 ==
所有網頁上的字體大小都會放大，除非回復瀏覽器設定。
=== Google chrome ===
方法1: [http://www.inote.tw/2011/01/google-chrome.html 設定 Google Chrome 預設網頁縮放大小 - 海芋小站]

方法2: [https://chrome.google.com/extensions/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe Stylish] for {{Chrome}}

=== Mozilla Firefox ===
法一：上方選單列：工具: 「選項」→「內容」標籤: 字型與色彩: 「進階」: 最小字型大小 → 設成12

: http://farm1.static.flickr.com/162/356657181_25429b4c7d.jpg
: Image hosted at [http://www.flickr.com/photos/planetoid/356657181/ Flickr]


法二： 
* [https://addons.mozilla.org/en-US/firefox/addon/nosquint-plus/ NoSquint Plus :: Add-ons for Firefox] [http://urandom.ca/nosquint/] "NoSquint is a Firefox extension that allows you to adjust the default text zoom level, which is very useful if you have a small display or run at a very high resolution. NoSquint also remembers the zoom level per site" cited from the official site. {{access | date = 2017-04-13}}


法三： {profile}/chrome/[http://www.mozilla.org/unix/customizing.html#userContent userContent.css]


法四： 
# 先安裝[http://userstyles.org/stylish/ Stylish]套件
# 關閉Firefox, 再重新執行Firefox
# 載入user style: 點選[http://userstyles.org/styles/3121 Readable text on white background]網頁上的「load into the Stylish」按鈕載入user style

<pre>
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix(http://), url-prefix(ftp://), url-prefix(file://), url-prefix(https://) {

* { color: black !important; background: none !important; background-color: white !important;  line-height: 160% !important; font-size: 12pt !important;}


a:link {color:#0000EE !important;}
a:visited {color: #551A8B !important;} 
a:hover, a:active { color: red !important;}

}
</pre>

因為上述樣式會套用到所有網站，若要限定部分網站，請自行修改url-prefix(http://) 為url-prefix(特定網站網址)

參考資訊:
* [http://userstyles.org/styles/681 Light text on black background | userstyles.org]
* [http://userstyles.org/styles/554 Black text on white background | userstyles.org]

== 恢復瀏覽器字體大小 ==
{{Chrome}}<ref>[http://www.google.com/support/chromeos/bin/answer.py?hl=zh-Hant&answer=96810 變更文字、圖片和影片大小 (縮放) : 網頁內容設定]</ref>、Firefox {{Fx}}<ref>[https://moztw.org/docs/fx/text-zoom/ Firefox - 放大／縮小文字]</ref>、{{IE}}<ref>[http://www.oldmutualinternational.com/zh-hk/omi-hk/consumer/accessibility/ 無障礙瀏覽 | Old Mutual International]</ref>、{{Safari}}<ref>[http://macs.about.com/od/applications/qt/safaritext.htm How to Control Text Size in Safari]</ref> 會記住該網站妳偏好的字型大小的設定。如果要重設大小，
* {{Win}}: 按 {{kbd | key=Ctrl}} + {{kbd | key=0}} (數字的 0)。
* {{Mac}}: {{kbd | key=⌘ command}} + {{kbd | key=0}}

== print friendly tool / 手動製作「友善列印」的網頁 ==
*  Aardvark: (1) Press {{Kbd | key= I }} to "Delete everything surrounding the selected element"  (2) Press {{Kbd | key= Ctrl }} + {{Kbd | key= P }} to call the printer window
** [https://addons.mozilla.org/zh-tw/firefox/addon/aardvark/ Aardvark Firefox Extension] for {{Fx}}
** [http://karmatics.com/aardvark/bookmarklet.html Bookmarklet version] for {{Fx}}, {{IE}} & {{Safari}}<!-- Safari was unverified on 2011-02-02 -->
* [http://www.printwhatyoulike.com/bookmarklet Bookmarklet « PrintWhatYouLike.com]

== 增加網頁易讀性工具 ==
增加網頁易讀性([http://www.webcredible.co.uk/user-friendly-resources/web-usability/web-page-readability.shtml readability])的其他工具
* {{Gd}} [http://www.printwhatyoulike.com/ PrintWhatYouLike.com]--Save paper & ink printing only what you want  介紹:[http://pcuser.pixnet.net/blog/post/24679290 用 PrintWhatYouLike 印網頁，省錢省墨版面全自訂！ @ PCuSER 電腦人]
* [https://www.printfriendly.com/extensions/other PrintFriendly & PDF BookmarkletPrint Friendly & PDF Button for FireFox, Chrome, iPad/iPhone, Internet Explorer, and Safari] 提供 bookmarklet 與瀏覽器套件 {{access | date=2020-03-17}}
* [http://rabbitbigwhite.pixnet.net/blog/post/28826405 如何用滑鼠手勢啟動 bookmarklet @ 三樓 :: 痞客邦 PIXNET ::] for {{Fx}}
* [https://addons.mozilla.org/en-US/firefox/addon/4242 Accessibar] for {{Fx}} (last visited: 2007-05-08)
* [http://www.instapaper.com/text Instapaper Text bookmarklet] for {{Fx}} & {{IE}} 教學: [http://blog.joaoko.net/archives/2460 (Bookmarklet) Instapaper 讓網頁變得更簡潔、易讀 - 0與1的邂逅]([http://www.instapaper.com/text?u=http%3A%2F%2Fblog.joaoko.net%2Farchives%2F2460 demo]) (last visited: 2011-02-02)
* [http://playpcesor.blogspot.com/2009/03/6bookmarklets.html 電腦玩物: 「電腦玩物」資訊網摘快遞第6期：全瀏覽器外掛書籤小工具Bookmarklets]
* [http://hemiolapei.free.fr/extensions/index.php/no-color No Color] for {{Fx}}：Hemiola 的 Firefox Extensions
* [https://chrome.google.com/webstore/detail/mercury-reader/oknpjjbmpnndlpmnhmekjpocelpnlfdi/related Mercury Reader] on {{Chrome}}

== 檢查網頁內文易讀性工具 ==
* [https://www.webfx.com/tools/read-able/ Readability Test - WebFX]

== 易讀性設計建議 (給網頁開發者) ==
易讀性設計建議
# 使用夠大的預設字體；
# 給頁面留一點空白，讓文字可以呼吸，走文不要塞滿整個螢幕；
# 行間距離建議使用140％ line height； （[http://b-oo-k.net/blog/blog.php/2007/187 老貓]按：中文行間建議使用160~170％）
# 文字和底色的對比要夠清楚；
# 不要把文字做成圖型。

* [http://jacky.seezone.net/2007/03/13/1779/ 「字大」派 - 網絡暴民 Jacky’s Blog]
* [http://b-oo-k.net/blog/blog.php/2007/187 連結吸子與理念宣揚 | 老貓學出版：圖書出版業, 編輯知識, 產業分析]
* [http://ntu.csie.org/~piaip/fontsize/ Font-Size Samples by piaip]:  字形大小的地雷設定值 (少用為佳): 
** (pt) 1-7pt, 15pt, 
** (px) 1-10px, 14px, 20px 
* [http://www.inside.com.tw/2011/06/10/readability 這文章好難看，改善 Readability 的十個方法 - Inside]
* [http://pansci.tw/archives/466 PanSci 泛科學 - 要提昇閱讀吸收程度，該選Kindle還是iPad? 其實換個醜字體比較有用]

== 辨識字體工具 ==
* [https://chromewebstore.google.com/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh Fonts Ninja] on Chrome：快速辨識網站字體：滑過任何文字即可看到字體名稱與 CSS 屬性
* [https://www.facebook.com/groups/149874075167476/ 字嗨 | Facebook] 可詢問字體
* [https://medium.com/%E8%81%BD%E8%AA%AA%E4%BD%A0%E6%83%B3%E5%AD%B8%E8%A8%AD%E8%A8%88/%E7%9C%8B%E5%88%B0%E5%96%9C%E6%AD%A1%E7%9A%84%E5%AD%97%E9%AB%94-%E4%B8%8D%E7%9F%A5%E9%81%93%E5%AD%97%E9%AB%94%E5%90%8D%E7%A8%B1%E6%80%8E%E9%BA%BC%E6%89%BE-3%E7%A8%AE%E6%96%B9%E6%B3%95%E5%88%86%E4%BA%AB%E7%B5%A6%E4%BD%A0-c13f6cc8a193 看到喜歡的字體，不知道字體名稱怎麼找？3種方法分享給你 - 聽說你想學設計 - Medium]

== 相關新聞 ==
{{News feed | title = "易讀性" OR "可讀性" 相關新聞聯播 | feed = <rss>https://news.google.com/rss/search?q=%22%E6%98%93%E8%AE%80%E6%80%A7%22%20OR%20%22%E5%8F%AF%E8%AE%80%E6%80%A7%22&hl=zh-TW&gl=TW&ceid=TW:zh-Hant</rss>
 }}

== References ==
<references/>

[[Category:Design]]