網頁設計中,font 如何 精確 體大小

2021-07-16 05:54:55 字數 4402 閱讀 3360

1樓:昂子帆

word中的pt(磅)和網頁中的px(畫素)之間的區別

px:pixel 畫素,印刷螢幕上顯示的最小單位。

pt:point 點,印刷業的標準長度單位。1pt=72分之一英寸。

好下面開始講解字型大小。

但這種說法其實還是有問題,先來看看下面的例子:

從上面的字型中我們能看出72px要比72pt小一些,但96px正好和72pt一樣大小 。

讓我們來調整電腦的設定:在桌面上右鍵 > 屬性 > settings > advanced > general > dpi setting > 96 dpi。

試著改變設定,設為72dpi,重啟,再開啟瀏覽器看:72px已經等同於72pt了。為什麼?

還是再做個實驗:分別用800×600和1024×768看剛才的例子,明顯高解析度下,文字就變小。而且,關鍵的是,無論用px還是pt,都會變小。

pt並沒有如有些人所說,是“絕對”的,“固定”的。

但如果用印表機把這頁面列印出來,就可以看到:無論螢幕用什麼解析度,列印出來大小都是一樣的(這是當然的)。

首先要分清“螢幕效果”和“列印效果”這兩個概念:

在瀏覽網頁過程中,所有的“大”“小”概念,都是基於“螢幕”這個“介面”上。“螢幕”上的各種資訊,包括文字、**、**等等,都會隨螢幕的解析度變

化而變化,一個100px寬度大小的**,在800×600解析度下,要佔螢幕寬度的1/8,但在1024×768下,則只佔約1/10。所以如果在定義

字型大小時,使用px作為單位,那一旦使用者改變顯示器解析度從800到1024,使用者實際看到的文字就要變“小”(自然長度單位),甚至會看不清,影響瀏

覽。那是不是用pt做單位就沒這樣的問題呢?錯!問題同樣出現。剛才的例子已經很清楚的說明,在不同解析度下,無論是px還是pt,都會改變

大小 。以現在的電腦螢幕情況,還沒有一種單位可以保證,在不同解析度下,一個文字大小可以“固定不變”。因為這很難以實現也不是很有必要:全球電腦使用者以億來

數,螢幕從14寸到40寸甚至更高都有,螢幕大小不同,解析度也不同,要保證一個字型在所有使用者面前大小一樣,實在是mission

impossible。另外,電腦有其自身的調節性,使用者可以自己來調節:1)在瀏覽器中調節字型大小;2)在剛才提到的顯示屬性裡調節。

那在頁面設計中到底是用px還是pt呢?

我認為,這個並沒有什麼原則性差異,就看自己處於什麼角度思考了。

mac機怎麼情況不清楚,在windows裡,預設的顯示設定中,把文字定義為96dpi(ppi,微軟都將dpi和ppi混為一體,我們也就無須較真

了)。這樣的定義,說明了:1px=1/96英寸。聯絡pt的概念,1pt=1/72英寸,可以得出,在這樣的設定中,1px=0.75pt,常見的宋體

9pt=12px。在顯示器解析度不變的基礎上(比如現在常用的1024×768),1px大小也就固定不變,改變顯示設定,調整為144dpi,可以得

出,1px=0.5pt,常見的宋體9pt=18px。原先用12px來組成的一個文字,現在需要18px來組成,px多了,文字就“大”了,更易閱讀

了。所以,px和pt的使用區別,只有當使用者改變預設的96dpi下才會產生:使用px定義文字,無論使用者怎麼設定,都不會改變大小;使用pt定義文字,當使用者設定超過96dpi的值,數值越大,字型就越大。

(附公式:px = pt * dpi / 72)

對了,剛才還提到改變瀏覽器中文字大小的選項,也可以改變網頁的文字大小。但在這種情況下,使用px和pt都是無效的,因為這2個都是有實際

“pixel”數值的單位,比如9pt是12px,大小固定。這裡要引用新的單位:em,其實就是%。因為當網頁中的字型沒有給出實際的px或pt定義的

話,會有一個預設值:12pt即16px,對應瀏覽器中“字型大小”中的“中等”,以這個為標準,變大或縮小。(只適用於ie,在ff中,即便定義px或

pt也都可以變大變小)

所以,從這個概念上看,em才是真正的“相對單位”(百分比嘛,當然是相對),而px和pt都是絕對單位(都有固定值)。

在網頁設計中,面向使用者的螢幕的基本單位是px,因此使用px作為單位是最簡單也最容易理解的,而pt也不過是通過了windows的設定乘上了一個比

是px,是不是也暗示著px是網頁設計的“內定單位”?

但的word或中,使用pt就相當方便。因為使用word和photoshop的主要

目的都不是為了螢幕瀏覽,而是輸出列印。當列印到實體時,pt作為一個自然長度單位就方便實用了:比如word中普通的文件都用“宋體

9pt”,標題用“黑體

16pt”等等,無論電腦怎麼設定,列印出來永遠就是這麼大。又或者在photoshop中,設定一個**中的某個藝術效果的字型是72pt大小,然後分

別將這張**設為300dpi和72dpi,再列印出來,就可以看出,這2個字型大小完全一樣,只是“清晰度”不同,300dpi更清晰。這是毫無疑問的

結果。px:pixel,畫素,螢幕上顯示的最小單位,用於網頁設計,直觀方便;

pt:point,是一個標準的長度單位,1pt=1/72英寸,用於印刷業,非常簡單易用;

em:即%,在css中,1em=100%,是一個比率,結合css繼承關係使用,具有靈活性。

ppi(dpi):pixel(dot)per inch,每英寸的畫素(點)數,是一個率,表示了“清晰度”,“精度” 。總之,做網頁的話建議最好用px,12px=9pt,相當於漢語中的小五字型;14px=11pt,相當於五號字型;16px=12pt,相當於小四字型;18px=14pt,相當於四號字型。

具體的換算公式:1px=96分之一英寸,等於0.75pt.根據這個公司自己換算,想要什麼字型基本上就知道了!可以慢慢推算出來。

2樓:匿名使用者

一般中文的字型大小是12px或者14px。隨著顯示器解析度不斷提高,12px的文字在大於1440*900的顯示器裡看起來會顯得比較小,閱讀起來不是很容易,所以現在網頁設計裡面用12px的已經比較少了,特別是文章正文部分,普遍都會用14px。13px的字型在ie6下面會有一點點顯示上的bug,所以現在用得也不太多,不過隨著ie6慢慢被淘汰,這個問題也不再是一個問題了。

而對於標題欄的文字大小,沒有特別的限制,視覺上感覺舒服就行。字型大小**:font-size:

14px(字型大小14畫素)。

css法:修改font-size屬性。

js法1:p.setattribute("fontsize","12px")。

js法2:p.style.fontsize=12+"px"。

jquery法:$("p").css("fontsize","12px")。

3樓:匿名使用者

用**font-size:12px 後面是12px代表字型是12個畫素,你可以依據自己的需要控制字型的大小

4樓:

w3c不贊成使用font標籤,並且xhtml 1.0 strict dtd不支援font標籤的size屬性。最好是用css來代替,例如,這樣可以很精確的以畫素為單位確定字型大小

5樓:匿名使用者

你好!你現在的size是html中的字型尺寸,這種不適合在頁面中作設定,這樣會影響整體字型大小的效果。你是好的方法就是要用css來做字型大小,這樣會很精確地做到。

通常情況下,字型大小都是畫素px為單位,用css來做設定的話,那如下例所示:

字型設定成為宋體12畫素字型:.px12

那如何呼叫:這是設定宋體12畫素字型效果

直接寫入頁面也是同樣達到效果,方法為:

那樣你字型大小就可以很好地精確起來,就不會一下子這麼大這麼難看了,你可以試一下。

希望我的回答能令你滿意!

6樓:匿名使用者

font-size:12px;

一般是這麼大的為標準吧,標題會更大,

請問在網頁設計css 裡面font-family,font-face,這兩個有什麼不同?

7樓:

第一個是指定字型:

.youclass

此處 font-family 指定字型為 文鼎pop ,但電腦上沒裝 文鼎pop 字型的人看網頁,將看不到這個字型效果,任看到電腦上預設的 宋體 或 微軟雅黑體,因此針對中文作業系統來說:為保證網頁效果,通常只能指定:宋體、黑體、微軟雅黑之類的系統上預設自帶的字型。

第二個 font-face 的用法是載入一個字型:

@font-face

將 文鼎pop 的 .eot 格式檔案傳到伺服器上,然後用 font-face 載入到網頁中,別人電腦沒裝這個字型,但用 font-face 載入後同樣能在網頁上顯示出文鼎pop的效果。

font-face 這個方法對中文網頁並無多大作用,可以不用關心這個用法,一是多數中文字型並沒有專門設計eot格式,二是中文字型動則10m甚至更大,在網頁中載入,等待時間太長,只會引起瀏覽者不爽。英文就不一樣了,26個字母大小寫也才52個+數字符號之類的在裡面,檔案也才幾十k,動態載入完全沒問題。

如何做好的網頁設計,如何做一個好的網頁設計

整個頁面的設計應該是和諧統一的 頁面整體和諧了,給瀏覽者是一個暢快舒服的感 覺,要做到這個視覺效果,必須注意頁面裡文字 線條 背景的統一融合,把這些組成網頁的因素都有機聯絡起來,做到這個比設計好一張 困難,他需 要有整體大局的眼光,不去拘泥於區域性或細小的地方。其實網頁設計就應該先整體再區域性,不過...

photoshop中,如何精確使用矩形選框工具,最好能直接精確設定其大小

使用選框工具時點工具欄裡面的樣式,選擇固定大小,寬度右鍵單擊選擇單位 ok 我有兩種方來法 1.開啟資訊面 源板,當你繪bai制矩形選框的時候,du你就可以知道其zhi大小。當繪製出dao理想尺寸的選取後,你就可以把選取拖動到理想的位置了 2.先繪製理想尺寸的矩形路徑,再按ctrl enter鍵把路...

怎麼快速學習網頁設計,如何快速學習製作網頁?

網頁設計看你要學到什麼程度,有繪畫基礎是最好,再就是把ps這個工具學好。然後在網上多找一些例項練手,再熟悉一下切圖,網頁裡面的基本html 及css樣式表。學習任何技術 都是需要付出時間和精力的。網頁設計基礎就那些,關鍵是不要順應網際網路的發展需求 需要不斷學習新的框架 實現快速搭站 便於後期維護等...