跳轉至內容

瀏覽器字型設定

0% developed
來自華夏公益教科書,開放世界開放書籍

簡介


許多人覺得需要調整瀏覽器字型大小,無論是為了彌補視力不好還是為了讓一些設計糟糕的網頁變得可讀。我自己對這個主題的無知在試圖解讀 Firefox 和其他瀏覽器的幫助頁面時就被快速發現了。我以為我已經理解了,但實際上很少有。

許多部分會影響最終的字型大小。 這些包括網頁作者的 HTML 頁面設計、使用者樣式表、許多瀏覽器設定以及平臺自身的顯示設定。 每個瀏覽器在功能上都有所不同,儘管最實用的設定在所有瀏覽器中都是通用的。 本頁面介紹了三種常見瀏覽器中的一些文字大小功能。

以下是一些字型定義。 有稱為的一般字型集。 這些包括襯線(帶尾巴)、無襯線(不帶尾巴)、比例(每個字元的寬度根據整體外觀調整)、和等寬(每個字元具有相同的寬度)。 每個族都包含一些字型變體(有些使用術語字形),每個變體都有自己的字型名稱,如Times New RomanArialCourier。 使用最多的字型是可縮放的,這意味著它們可以放大或縮小相當大的程度,而不會出現毛邊。 有關術語的更詳細描述,可能更適合印刷,請參見標題為字型的維基百科頁面。

這裡“字型”指的是“命名字型”。 在對字型一詞的直觀使用中存在一些混淆。 大多數人傾向於使用字型來指字型名稱,或許還會指字型族,但不指字型大小、字型顏色或其他屬性,理解這個簡單的點有時可以使原本的混淆變得清晰。 從印刷到計算機螢幕的術語轉換使事情變得混亂,但這裡描述將被發現很容易理解。 如果這些筆記使用字型字形變體這些術語,它們將指的是字型名稱,如CourierArial,而如果指的是大小,則將使用“大小”一詞。

 

螢幕顯示設定

[編輯 | 編輯原始碼]

在最高級別,軟體平臺的顯示設定控制著所有東西的大小; 在桌面上、在應用程式上、文字、影像、表格、所有東西。 也就是說,螢幕可以保持在它的本機解析度,通常是它的最大解析度,或者可以設定為更低的解析度。

為螢幕設定更低的解析度意味著畫素被假設為被分組到比以前“更大的塊”中,因此顯示在螢幕上的物體,它們的寬度仍然以相同數量的畫素定義,現在必須佔用更大的空間。 換句話說,軟體的邏輯螢幕畫素都對映到比以前更多的物理螢幕畫素。 結果,螢幕上的所有東西都被放大,在小螢幕上,軟體需要重新排列布局,以使其全部適合。

應該更改桌面文字大小,如果閱讀起來不舒服。 在考慮對瀏覽器或其他程式中字型進行任何其他調整之前,應該進行此設定,因為此設定也會影響它們。 例如,Windows 平臺在其控制面板顯示部分調整螢幕解析度。 儘管此設定可以大幅度提高,但大多數程式在響應此設定時所能處理的調整存在限制。

 

網頁中的字型大小

[編輯 | 編輯原始碼]

網頁作者使用的尺寸程式碼會極大地影響網頁,尤其是在使用者嘗試更改文字大小的時候。 主要問題與作者是否以絕對大小或相對大小設計其頁面有關。

絕對大小


使用絕對長度測量來定義字型大小,例如,pt(磅)、px(畫素)、cm(釐米)或in(英寸)會導致字型以精確的大小顯示,瀏覽器將使用轉換因子在頁面上呈現文字。 當瀏覽器設定為標稱時,也就是說沒有縮放或其他放大文字時,文字將以接近印刷品中發現的大小顯示。

這並不是說絕對大小是一件壞事。 它們通常會生成清晰的網頁。 但是,當用戶嘗試使用預設設定來增大文字大小時,它根本不會改變。 使用預設設定不會對以磅或畫素為單位的字型大小產生任何影響。

要快速測試這個想法,只需開啟Google 搜尋頁面,並嘗試使用預設字型設定增大其大小(不是頁面縮放)。 Google 的網頁作者已經使用絕對單位指定了字型的尺寸。

相對大小


使用相對長度測量來定義字型大小,例如,em(容器字母“m”的寬度)、ex(容器字母“x”的寬度)或%(容器字型大小的百分比),沒有任何絕對大小的提及,允許使用所有瀏覽器的文字大小功能。 這是大多數網頁的首選設計方法。

瀏覽器在顯示文字時所依據的底層假設是每個 em 單位相當於 16 個畫素。 此假設將在顯示之前進行修改,以考慮瀏覽器的預設設定。(據說 Internet Explorer 在僅使用相對大小且在頁面的 body 標籤中放置了 100% 的字型大小的情況下,執行效果最佳)。

混合絕對和相對


當網頁或其樣式表中同時存在絕對相對字型大小的混合時,頁面可能仍然能夠正常工作,使用者並不知道情況是這樣的。 但是,當選擇較大的預設大小,相對大小會進行縮放,而絕對大小不會,這會導致文字出現很多混淆和錯位。

大多數瀏覽器都具有幫助克服這種混淆的功能,並且可以忽略絕對大小。 當這樣做的時候,使用者必須選擇字型來替換它們。 此外,使用者可以使用他們自己的樣式表。

預設大小和字型選擇


當頁面樣式中不存在絕對或相對字型大小時,將使用瀏覽器的預設字型大小。 如果作者提供了字型選擇,例如,Times New Roman,它將被使用,但如果未指定,則將選擇預設的字型名稱。 對字型顏色也有類似的論證。

“完全沒有大小”的情況會使用客戶端樣式表。 它擁有所有其他樣式的最低優先順序。

 

常見瀏覽器功能

[編輯 | 編輯原始碼]

下表中列出了三種瀏覽器以比較它們的文字大小功能。 而不是讚揚或貶低任何一個瀏覽器,指出幾乎所有網際網路瀏覽器都是免費提供的,因此完全有可能為特定任務使用不同的瀏覽器,可能更有用。 關於每個類別的說明可以在下面的文字中找到。


三種瀏覽器的字型大小功能
功能 Internet Explorer 8 Mozilla Firefox 3 Opera 11
更改使用者字型大小
更改使用者字體系列
縮放整個頁面
僅縮放文字
設定最小字型大小
使用者樣式表
[1]

[2] [3]

[4]
輔助功能



瀏覽器選項和字型偏好使用畫素單位。為了顯示基線,它們將 1em 等效為 16 畫素。在沒有其他顯示放大功能的情況下,這將顯示為約 12pt。
關於點


安裝或更改本地樣式表時,幾乎所有瀏覽器都需要重新啟動瀏覽器才能看到更改。這也適用於 Opera 中的偏好設定更改。
記住重新啟動!


更改使用者字型大小


這是瀏覽器的主要尺寸調整,它隻影響文字,而不是像頁面縮放設定那樣影響整個頁面。它有時被稱為 *預設大小*,因為它是任何其他規格不存在的情況下使用的值。更重要的是,當網頁作者正確地以 *相對* 大小指定字型時,此設定將提供背景大小設定或基準大小,這將作為頁面上所有字體範圍縮放的參考點。它是一個人會經常使用以獲得他們喜歡的檢視級別的設定。這三個瀏覽器都允許使用者更改顯示的字型大小,甚至可以覆蓋作者的特定點大小以支援他們自己的偏好。

在這三個瀏覽器中,Internet Explorer 8 的功能最少。它沒有單獨的 *預設大小* 設定,而是依賴於“檢視”(和“頁面”)工具欄上的五個“最小到最大”選項。最近對 Internet Explorer 8 的測試,使用接近原生螢幕解析度、100% 頁面縮放和瀏覽器字型設定處於最大值,無法生成大於約四分之一英寸 (6mm) 的 1em 文字。Firefox 3 和 Opera 11 都可以在很大範圍內指定預設大小,並且可以在瀏覽器選項(偏好設定)中設定。

更改使用者字體系列


選擇 Arial 無襯線字型用於大多數網頁工作是幸運的,因為它具有良好的清晰度,並且大多數使用者傾向於堅持使用它。但是,當作者沒有指定要應用於頁面的字型名稱時,將使用使用者的預設字型。另一方面,如果網頁作者 *已* 指定要使用的字型名稱,但使用者發現這些字型不令人滿意,那麼使用者可以覆蓋他自己的選擇以支援他自己的偏好。在這三個瀏覽器中,覆蓋只是清除框的問題。

這三個瀏覽器在字型名稱和字型顏色選擇方面表現同樣出色。

縮放整個頁面


所有三個瀏覽器都有頁面縮放功能。顧名思義,文字和其他頁面結構都會增加,並且不受任何其他大小設定的限制——它只是一個頁面放大鏡。此設定可用作臨時措施來放大文字,儘管它會放大所有內容。令人驚訝的是,這三個瀏覽器在合作精神上,都使用相同的快捷鍵進行縮放。(*Ctrl+plus* 以增加;*Ctrl+minus* 以減少;*Ctrl+zero* 以重置)。

Internet Explorer 8 和 Opera 11 的下拉選單中都有大量的頁面縮放設定,但沒有重置的跡象。另一方面,Firefox 3 只有“向上或向下”的縮放選擇,但顯示了重置。

僅縮放文字


此功能允許縮放頁面文字,而不改變其他結構。它是一個真正的文字功能,因為它不能降至低於最小字型大小設定。與其他同類功能不同,它還增加了作者指定的字型大小,他的絕對大小,以及具有相對大小的字型;這樣做不會覆蓋作者的字型。此功能類似於 *最小字型大小* 設定。它使用與頁面縮放相同的快捷鍵。

另一方面,一些功能,例如橫幅文字最好使用固定絕對值來製作,這樣當用戶增加文字大小時,文字不會溢位框。因為文字縮放會影響所有文字,它可能會扭曲此類功能。

在這三個瀏覽器中,它僅在 Firefox 3 中提供。

最小字型大小


乍一看,*最小字型大小* 似乎與 *預設大小* 相同。但是,*預設大小* 指的是 *常規正文文字*,而作者仍然可以設定低於正文文字的值,例如表格中的文字。此最小字型大小設定是最通用的,因為它適用於絕對大小和相對大小,並且無需覆蓋作者的字型。

也就是說,即使作者在其樣式表中指定了 9px 字型,16px 的最小字型大小設定也會使其放大。縮放不適用於頁面上的 *所有* 字型;只有低於閾值的字型。因此,如果此設定高於預設大小,它將覆蓋一些值。那些希望所有文字都不小於正文字型的人應該將預設值和最小值設定為相同。另一方面,對於那些沒有特殊檢視需求,並且希望賦予網頁作者最大顯示範圍的人來說,最小值應該在預設值的約三分之二處。

Firefox 3 和 Opera 11 可以設定最小字型大小,但 Internet Explorer 8 沒有特定的設定。

使用者樣式表


作者的樣式要麼直接寫入網頁中(標題樣式或內聯樣式),要麼包含在與網頁一起下載到瀏覽器的樣式表中。頁面上可能有多個樣式表和許多樣式,瀏覽器的任務是決定將所有樣式中的哪些樣式應用於頁面部分。瀏覽器有時允許使用者新增他自己的樣式表,並且可以優先考慮此樣式表以決定頁面上的格式。這允許使用者指定他自己的樣式,儘管只有在他的本地顯示中才能看到這些樣式。此功能允許為特殊目的定製樣式;視障人士的輔助功能,以及克服一次性問題型別。

Internet Explorer 8 和 Opera 11 允許從“瀏覽”對話方塊中新增此類樣式表,而 Firefox 3 需要使用者手動將 css 檔案新增到瀏覽器的配置檔案資料夾中。在本文件底部可以找到有關它們包含的引用。使用 Internet Explorer 8 測試了樣式表,對於那些熟悉 CSS(層疊樣式表)樣式表示式的建立的人來說,這是一個簡單的過程。感興趣的各方可以在  W3 CSS 參考 和  字型測試器 中找到建立樣式表的方法,許多人發現他們可以在經過一段時間的學習後,在 *記事本* 中編寫 *。css* 檔案。

輔助功能


所有三個經過測試的瀏覽器都熱衷於提及他們的輔助功能,儘管它們的有效性尚不清楚。我最近對 Opera 11 中語音功能的測試完全失敗,並且提交了錯誤報告。也許可以說,使用者樣式表功能的包含本身就是朝著允許特殊格式邁出的一個步驟,儘管提供一系列適用於每個殘疾分組的樣式表的瀏覽器無疑會贏得最大尊重。在這三個瀏覽器中,只有 Opera 允許從瀏覽器的工具欄中應用高對比度樣式。歡迎對該主題有經驗的個人在此新增他們的評論。

雖然通常不被認為是瀏覽器問題,但 *離線檢視* 的 Windows 和 Microsoft Office 幫助面板使用 Internet Explorer 的特殊格式版本來顯示基於 HTML 的文件。因為這些幫助面板缺少正常的瀏覽器工具欄,所以它們有選項按鈕來允許增加或減少字型大小。當 Microsoft 產品訪問 *外部幫助網頁* 時,它優先使用 Internet Explorer。不幸的是,這些網頁幫助頁面並不總是按預期進行縮放。

使用寬屏尺寸(約 1600 畫素)的人會發現,一些 Microsoft Office 幫助頁面中有一些文字對於日常工作來說太小了。(例如 VBA 幫助示例程式碼。)在 Windows 7 的 Word 2010 中,即使存在用於此目的的按鈕,VBA 幫助也無法調整大小。但是,因為這些幫助功能使用 Internet Explorer 來顯示它們,所以發現使用者樣式表是最好的解決方案。透過將 IE 設定為具有使用者樣式表,可以將 MS 幫助螢幕設定為任何指定文字大小。但是,這樣做通常意味著 IE 必須保留用於該特定目的,並且可能需要另一個瀏覽器來進行一般的網頁瀏覽。以下下拉框中提供的簡單 css 程式碼可以儲存為 css 檔案並安裝為使用者樣式表,以展示如何增加難以處理的頁面的文字大小。(例如,一些離線開發人員 VBA 示例)。

也就是說,在 MS Word VDE 中開啟的離線 MS 開發人員幫助頁面即使在線上 VBA 幫助正常工作的情況下,也頑固地保持著很小的文字。

MS 幫助頁面的使用者樣式表
/*  This style sheet allows Microsoft Office Help pages to display 
    in the size specified below - eg 11 point */

/*  Be sure to restart the Office application after installing the 
    style sheet  */

/*  When the help pages are still badly distorted, then repairing MS Office
    will sometimes rectify the matter  */

/*  Install this css file as a User Style Sheet to see how it works. 
    Be sure to select the 'Ignore font sizes specified in web pages' and the 
    'Format documents using my style sheet'  check boxes
    in the Accessibility dialog of the Internet Explorer's browser options. */

                 
/* ****************************Styles ********************************* */

div
{
font-family:Verdana serif monospace;
font-size:11pt;
line-height:1.5em;
}   


參考

[edit | edit source]
  1. Internet Explorer 8 樣式表
  2. 自定義 Firefox
  3. Firefox 配置檔案位置
  4. Opera 中的使用者 CSS

另請參閱

[edit | edit source]
  • 嘗試 CSS 編碼  : 一個免費使用、互動式、CSS 程式碼編寫器和檢視器,主要用於文字。
  • 字型  : 維基百科上關於字型的詳細頁面
  • W3 CSS 參考  : 全球資訊網聯盟的 CSS 參考頁面
  • 新增使用者樣式  : 在 Internet Explorer 中建立使用者樣式表的詳細資訊。


 

華夏公益教科書