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

時間 2021-07-16 05:55:08

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,動態載入完全沒問題。

如何設計網頁調查問卷,如何設計一個網頁調查問卷?

office 2003以上版本的有infopath,專門設計這樣東西的。如果要做成網頁,區域網需要有iis和asp支援。建議掛在internet上,時間到了以後撤下。網頁版問卷調查怎麼做? 侃侃筆墨話人文 用手機或者電腦登入網頁,輸入登入名和密碼,然後根據提示按實際情況填寫,一般會涉及基本資訊,年齡...

如何列印網頁中的水印,如何列印網頁中的水印?

可以用截圖鍵先把螢幕截下來,然後列印。電腦的截圖鍵是主鍵盤和小鍵盤中間的區域,有一個print screen就是字母最長的那個按鍵,按完後在畫圖裡ctrl v就上去了,也可以在qq聊天記錄裡貼上,然後就是儲存進行 列印了。 極客視角 將這個網頁儲存在自己的電腦裡,ie欄上 最左上 檔案 另存為。再在...

灌注樁的混凝土設計澆築量如何計算精確

水下灌注樁的混凝土設計澆築量公式為 3.14 r 2 h r為樁的半徑,h為設計樁長 0.7m 實際澆築的混凝土量肯定比理論的要大,也就是說充盈係數必須大於1,具體是多少,這個要根據現場經驗來判斷。現澆混凝土樁 一 人工挖孔灌注混凝土樁注意事項。1 人工挖孔混凝土灌注樁綜合基價,分別設定了樁徑在14...