Enlarge the font size on a web page

From LemonWiki共筆
Jump to navigation Jump to search

放大網頁上的字體大小


臨時放大字體大小

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

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); } })();

總是放大字體大小

所有網頁上的字體大小都會放大，除非回復瀏覽器設定。

Google chrome

方法1: 設定 Google Chrome 預設網頁縮放大小 - 海芋小站

方法2: Stylish for Chrome  

Mozilla Firefox

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

356657181_25429b4c7d.jpg
Image hosted at Flickr


法二：

  • NoSquint Plus :: Add-ons for Firefox [1] "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. [Last visited: 2017-04-13]


法三： {profile}/chrome/userContent.css


法四：

  1. 先安裝Stylish套件
  2. 關閉Firefox, 再重新執行Firefox
  3. 載入user style: 點選Readable text on white background網頁上的「load into the Stylish」按鈕載入user style
@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;}

}

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

參考資訊:

MS Internet Explorer

網路報馬仔 教學

恢復瀏覽器字體大小

Chrome   [1]、Firefox Firefox browser_firefox.png [2]、IE   [3]、Safari  [4] 會記住該網站妳偏好的字型大小的設定。如果要重設大小，

  • Win   : 按 Ctrl + 0 (數字的 0)。
  • macOS icon_os_mac.png : ⌘ command + 0

print friendly tool / 手動製作「友善列印」的網頁

增加網頁易讀性工具

增加網頁易讀性(readability)的其他工具

易讀性設計建議 (給網頁開發者)

易讀性設計建議

  1. 使用夠大的預設字體；
  2. 給頁面留一點空白，讓文字可以呼吸，走文不要塞滿整個螢幕；
  3. 行間距離建議使用140％ line height； （老貓按：中文行間建議使用160~170％）
  4. 文字和底色的對比要夠清楚；
  5. 不要把文字做成圖型。

相關新聞

"易讀性" OR "可讀性" 相關新聞聯播
Failed to load RSS feed from https://news.google.com/news/rss/search/section/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&ned=tw: Error parsing XML for RSS

Powered by Google News

references

  1. ↑ 變更文字、圖片和影片大小 (縮放) : 網頁內容設定
  2. ↑ Firefox - 放大／縮小文字
  3. ↑ 無障礙瀏覽 | Old Mutual International
  4. ↑ How to Control Text Size in Safari
Retrieved from "https://wiki.planetoid.info/index.php?title=Enlarge_the_font_size_on_a_web_page&oldid=19247"