CSS網頁設計時關於字體大小的設計

2020-12-18 站長之家
首頁

 > 

教程

 > 

關鍵詞

 > 

CSS最新資訊

 > 

正文

CSS網頁設計時關於字體大小的設計

字體大小

CSS2規範根據長度——水平和垂直尺寸——來定義字體。這個長度為一個數值,前面可能帶一個可選的加(+)或減(-)標記符。另外,該數值後可能有一個可選的單位標識符。

另外,CSS2規範定義了兩個單位類型:絕對單位和相對單位。絕對值指定單位,而相對單位指定一個與另一個值成比例的值。下面的列表列出了相對單位標識符:

em:元素字體的高度。它與使用該字體的元素的字體大小屬性計算值相等。當它出現在字體大小屬性值本身中時,會出現異常,這時它指母元素的字體大小。

ex(x-高度):CSS2規範將它描述為小寫字母x的高度。

px(像素):它與背景或屏幕的解析度有關。根據顯示器解析度輸出不同像素,由於用戶的喜好不同,顯示器的解析度可能會有很大差異。

下面是有效的絕對單位標識符:

in(英寸)

cm(釐米)

mm(毫米)

pt(點,1點=1/72英寸)

pc(12點活字,1pc=12點)

測量絕對大小的另一種方法是使用衡量一個值的比例因數,應用以下關鍵字:最小、較小、小、中、大、較大和最小。中為基值,變小就減去一個因數,變大就增加一個因數,等等。CSS2規範定義的比例因數為1.2,這個值也可能依瀏覽器而變化。

還可以應用百分比值來格式化文本。百分比值是一個可選的標記符,即數字後帶有一個百分比符號(%)。百分比值總是與另一個值成比例。就字體而言,它與網頁的基本字體大小成一定比例。

如您所見,有許多方法可完成呈現文本這個看似簡單的任務。下面的HTML格式文本(在段落元素中)應用了各種單位標識符。其中所有的值都相等,並假定以72dpi進行顯示。

以下為引用的內容:
<html>
<head>
<title>Font Sizing - equal values</title>
</head><body>
<p style="font-size: 36pt;">Point</p>
<p style="font-size: 3pc;">Pica</p>
<p style="font-size: 0.5in;">Inches</p>
<p style="font-size: 1.27cm;">Centimeters</p>
<p style="font-size: 12.7mm;">Millimeters</p>
<p style="font-size: 300%;">Percentage</p>
</body>
</html>

您可以在這個列表中增加像素值,但它的值要依環境而定。例如,我的解析度為1280X1024的手提電腦將顯示與在上表中使用50像素值一致的文本。

仔細閱讀前面提到的CSS2規範,可以獲得更多字體大小方面的知識。現在我將討論如何決定在網絡應用中使用哪種方法。

選擇哪一種方法

在CSS中有許多和字體有關的選項,但哪一種最適合在您的網絡應用中使用呢?絕對大小有許多缺陷,特別是在一致性、靈活性與訪問性方面存在問題。與絕對字體大小相比,任何視力有缺陷的用戶可使用相對字體大小來擴大頁面中的文字,這樣更便於閱讀。因此,開發者經常使用相對大小。

讓我們來詳細了解一下相對大小:

像素是最通用的大小值。多數瀏覽器都支持它,但也並非總是如此。瀏覽器常常將像素當作屏幕像素而非CSS像素來處理。像素的一個缺點在於,它忽略或否定用戶的喜好,且不能在IE中調整大小。

許多開發者偏愛用點來衡量字體大小,但點主要用於桌面印刷系統,不方便移植到網絡中。在呈現文本時,作業系統或瀏覽器默認使用像素。

最常用的方法是使用em或百分比大小。EM可在所有支持調整尺寸的瀏覽器中進行調整。Em還與用戶偏愛的默認大小有關。在IE中應用em的結果難以預料。在IE中最好使用百分比來設定文本大小。

下面的例子結合使用em和百分比值來對文本進行格式化。基本文本用百分比值來設置,然後用em來進行調整。

以下為引用的內容:

<html>
<head>
<title>Display Test</title>
<style type="text/css">
body {font: Sans Serif, Arial; font-size: 110 %}
</style></head><body>
<p style="font-size: 1.0em;">Basic text.</p>
<p style="font-size: 1.5em;">Larger text.</p>
<p style="font-size: 0.5em;">smaller text.</p>
</body>
</html>

全都與外觀有關

現有的標準提供許多格式化並呈現網絡應用中的文本的方法。開發者可以很方便地將文本分解成相對和絕對標識符。關鍵在於保持一致,並徹底檢測解決方案。

相關焦點

  • CSS教程:網頁字體及字體大小的設計
    字體大小CSS2規範根據長度——水平和垂直尺寸——來定義字體。這個長度為一個數值,前面可能帶一個可選的加(+)或減(-)標記符。另外,該數值後可能有一個可選的單位標識符。另外,CSS2規範定義了兩個單位類型:絕對單位和相對單位。
  • 網頁設計基礎:Div+CSS布局入門教程
    首頁 > 教程 > 關鍵詞 > 最新資訊 > 正文 網頁設計基礎:Div+CSS布局入門教程
  • 網頁設計開發如何處理網頁字體
    在網頁設計開發過程中,最重要的莫過於網頁的視覺效果,設計人員經常花費大量精力用於調整字體和字號。利用CSS2規範,我們可以在Web頁面或應用程式中隨意對字體進行調整。本文將深入探討字體大小,並介紹在網頁和網頁應用程式中調整字體的最佳方法。
  • 怎麼改網頁字體大小?
    一般網頁的字體都是很適合一般人閱讀的,不然如果一個網站的網頁字體設置的過大或過小都會沒人去看的。但總會遇到一些特殊情況,需要改變下網頁字體大小才更好。其實很多人寫過經驗怎麼改變網頁字體大小,但大多數人都是寫的實質是改變網頁大小,並不是單單網頁字體的大小。
  • Google網頁字體在線服務 設計師的福音
    目前網頁上使用的字體都是常見的幾種,如』Lucida Grande』, Verdana, Arial, Sans-Serif,中文常見的有宋體。要想用比較個性的字體就比較麻煩了,因為你不能保證客戶端是否支持這種字體,常用的方法是用Photoshop把文字製作成圖片。
  • 網頁設計中各度量單位的比較
    首頁 > 教程 > 關鍵詞 > 網頁最新資訊 > 正文 網頁設計中各度量單位的比較
  • 網頁設計引入CSS樣式的五種方式
    首頁 > 教程 > 關鍵詞 > 最新資訊 > 正文 網頁設計引入CSS樣式的五種方式
  • HTML+CSS:css的常用標籤總結,了解各個標籤的作用
    css的標籤有很多,本篇文章為大家總結以下常用的一些標籤以及簡單說明這些標籤的作用。(1) css的文字屬性標籤文字顏色: color: #ffffff;文字樣式: font-style: oblique;(偏斜體) italic;(斜體) normal;(正常) 字體大小:font-size:16px;
  • 網頁設計規範(尺寸、字體篇)
    To B 端是面向商家和專業人士,因而TO B與 TO C端在設計上是大相逕庭的, To B 類網頁最重要的是效率而不是體驗。因網際網路的發展,現今對網頁設計的要求也提高了,所以有個自己的設計規範會使設計簡潔而高效。根據本大寶貝的設計細節,相信你很快就能與大神比擬了,哈哈哈哈,開個小玩笑,下面咱們就從尺寸、字體、圖片、顏色等方面來開展深入探索!
  • 用3個步驟實現響應式網頁設計....
    文中提到的響應式網頁設計(Responsive web design)是一種現代網頁設計方法,基於CSS3的媒介查詢(Media Query)特性使得網頁適應不同設備,即根據設備的解析度和縮放自動重新布局。
  • 網頁窗口字體大小的更改
    我們在瀏覽網頁的時候,老年人也許喜歡比較大的頁面,這樣瀏覽起來會比較舒服,年輕人視力較好的也許喜歡比較小的字體,這樣根據自己的需要進行調整,以達到最好的舒適度。點擊頁面右上角的「工具」,「縮放」然後選擇對應的縮放比例。這樣可以按照對應的縮放比例進行放大或者縮小。
  • 網站製作——css標記語言
    對於網頁設計而言,html語言就像是畫板,讓你盡情施展操作;css就像是一支畫筆
  • 網頁設計新趨勢:我所知道的關於web字體的一切
    說起來,在過去的很長一段時間裡,我都同不同的網頁設計師一起合作開發各種不同的網站,這使得我逐漸開始關注網頁設計中的很多細小但重要的細節了,比如,字體。  在此可以簡單介紹一點背景知識。目前多數的網站都是基於HTML和CSS來開發的,如果你毫無網站開發經驗,也許你有必要找個HTML&CSS的介紹視頻學習一下,比如1小時創建一個體驗不錯的個人網站頁面之類的教程。
  • 網頁|CSS字體介紹
    除了上一節我們講到的背景以外,字體也是一個我們最常用到的屬性,接下來我們就來講一講CSS字體。CSS字體(font)屬性定義文本中的字體,我們將從以下幾個方面進行介紹。可以使用font-family屬性定義文檔採用的優先字體系列。1. 通用字體系列CSS定義了5種通用字體系列:a)Serif字體系列的字體成比例,而且有上下短線。
  • 網站預設字體 CSS 最佳寫法
    英文字體的文件大小比較小可以使用嵌入字體讓網站展示更好,但中文就不一樣了,文件大小是 MB 級別,為了 WEB 端性能,只好使用系統自帶的默認字體
  • 網頁背景圖片固定代碼案例源碼分享
    收錄於話題 #網頁設計  前話 此篇已擱置很久,由於有個問題一直困擾我,導致沒有狀態和精力去更新,一直在努力得調整自己,堅持,堅持,再堅持
  • 做網站建設時通常會考慮哪些字體樣式
    做網站建設時通常會考慮哪些字體樣式視覺設計都是細節為王,每個像素都要做好。字體是臉面,好的字體可以讓網站嶄露頭角。別吊在默認字體這棵樹上。不同的字體在網站中的樣式也不一樣,而且一些字體是需要成本的,儘量不要使用一些過於稀有個性的字體樣式,由於網站上使用的字體務必閱讀者網站上有才能夠正常顯示,如果客戶電腦上沒裝這種字體,就會出錯,在網際網路剛發展那幾年,網站大多數都是英文。
  • 好的字體讓你的網頁設計「傾國傾城」
    當我們瀏覽網頁時,圖像往往能在視覺上首先吸引人的注意力,一個好的圖片設計可以大大美化頁面。和文字相比,網站上圖片傳達的視覺印象要強烈得多。設計師們也一直注重對圖像的創意設計、網頁版式設計以及色彩搭配,它們是視覺傳達的重要手段。
  • 網頁樣式表技巧:引入CSS樣式表的五種方式
    <STYLE TYPE="text/css">    <!--    樣式規則表    -->     </STYLE>    例如:     <STYLE TYPE="text/css">    <!
  • 【超實用】如何給你的網頁選擇合適的字體?
    這個字體系列沒有默認字體,英文來說,通常用 Comic Sans,中文的話,行書系列、草書系列的字體等,都可以算作手寫字體。fantasy:裝飾用字體。多數用於標題,極具個性,字體繁多,藝術字體。無法對其的大小、形狀下一個統一的定論,所以沒有默認字體,在網頁中,也通常很少用到,除非你有特殊的用處創意性的設計。