您現在的位置是:電腦技術吧?>? 基礎知識 ??>??字體尺寸對照表,ps查看字體實際尺寸??>??正文詳情

字體尺寸對照表,ps查看字體實際尺寸

保雅寧2019-11-26 08:31:31 人圍觀
簡介6號字體多大CSS中的常用單位可以用多種不同的方式設置字體大小。一般來說,這些單位分為絕對單位和相對單位兩大類,在大多數情況下,絕對單位是相對于某些實際測量值的固定值,

常用單位  在CSS中可以用很多不同的方式來設定字體的尺寸。

一般來說,這些單位被分成兩大類:絕對單位(absolute)和相對單位(relative)。

  絕對單位在大多數情況下是相對于某些實際量度而言的固定值,即是說它們一旦設定,就不會因為其他元素的字體尺寸變化而變化。

  相對單位沒有一個固定的度量值,而是由父元素尺寸來決定的相對值,它們的尺寸會根據與其相關的元素改變而改變。

  下面是對這些單位的一個簡單整理:

  這里主要關注這幾個單位:px、pt、%、em、rem和vw。

  它們之間有什么區別?  從概念上很難理解這些單位之間的差別,所以下面用一些實例來說明。

  例1. 默認設定  當你不設定字體尺寸時,HTML會提供一個默認的尺寸設定。

大多數瀏覽器中和標簽中的默認字體尺寸是100%,沒有概念?看這個等式:  CSS Code復制內容到剪貼板  100% = 1em = 1rem = 16px = 12pt  還是不懂?那就換個說法,比如說你給一個設置字體尺寸為100%,給另一個設置為16px,在屏幕上看到的這兩個中的字體大小是一樣的,下圖列出了用幾個不同單位設置的字體尺寸,可以看出是一樣大的:

  例2. 絕對與相對  改變的字體尺寸可以很明顯的看出絕對單位和相對單位的差別。

如果把設置為html { font-size: 200% },就會影響所有使用相對單位的。

效果如下圖:

  這就是相對單位最主要的優勢了,借助相對單位的這種特性就可以設計出真正的響應式頁面,而所要做的只是修改的字體尺寸  例3. rem與em(或者%)  em(或者%)需要通過父元素的字體尺寸來計算尺寸:  CSS Code復制內容到剪貼板  html {  font-size: 100% /* =16px */  }  body {  font-size: 2em; /* =32px */  }  p {  font-size: 1em; /* =32px */  /* font-size: 0.5em; =16px */  }  因為是的子元素,而是的子元素,所以中的em和%將是之前的兩倍。

  當你為一個元素添加em單位時,應當考慮到所有父元素的字體尺寸。

如你所見,這樣很容易使人混亂。

  使用rem可以很好的解決這個問題。

rem只需要計算的字體尺寸而不需要考慮父元素。

如下代碼所示:  CSS Code復制內容到剪貼板  html {  font-size: 100% /* =16px */  }  body {  font-size: 2rem; /* =32px */  }  p {  font-size: 1rem; /* =16px */  }  使用rem可以讓你擁有和em/%同樣的縮放能力,但不必去考慮那些復雜的嵌套關系。

  例4. Viewport寬度  vw是CSS3中新提出的一個單位,通過Viewport寬度來計算字體尺寸。

這樣就可以設計出更加靈活的響應式字體。

  雖然這個單位看上去非常適合用于響應式設計,但就我個人而言不是很熱衷于它。

在使用vw的過程中我并不能很好的控制字體的大小,不是太大就是太小。

  我的方式  當我在寫這篇文章時,我僅使用px來作為單位。

因為現在大多數瀏覽器都允許用戶放大頁面,這樣做就不會有可訪問性的問題。

  然而,我發現了這個具有一定限制力的方式。

雖然我的字體尺寸在中小型屏幕上看起來還行,但在大屏幕上會被優化的更好。

盡管用戶可以自行設定放大的屬性,但是我們希望可以盡量減少用戶的工作。

  我的解決方案是使用rem,并使用px作為備用單位。

  CSS Code復制內容到剪貼板  html {  font-size: 62.5%; /* sets the base font to 10px for easier math */  }  body {  font-size: 16px;  font-size: 1.6rem;  /* sets the default sizing to make sure nothing is actually 10px */  }  h1 {  font-size: 32px;  font-size: 3.2rem;  }  像下面這樣寫就可以允許我按比例來放大我的字體尺寸:  CSS Code復制內容到剪貼板  @media screen and (min-width: 1280px) {  html {  font-size: 100%;  }  }  這個方案之所以使用px作為備用單位,是因為rem不支持IE8及其以下版本。

這個方案有一個問題,就是像上面這樣改變基礎字體尺寸時,并不能對備用字體尺寸起到作用。

不過,我不覺得這個問題多么大,因為這個匹配大型設備尺寸的能力只不過是為了錦上添花而已,并不是一個核心功能。

版權聲明:本文由 保雅寧 整理編輯。

原標題:打印字體一般多大,一號字體多大

轉載注明出處:http://www.dn9ww09s.icu/basics/14397.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 輸入法圖標不見了怎么辦,輸入法不見了

    輸入法圖標不見了怎么辦,輸入法不見了 相關圖片電腦右下角輸入法圖標不見了最近,有人問超人,當電腦的輸入法圖標突然消失時,如何恢復。超人收集了一些解決方案。如果其他車主也遇到相關問題,可以和超人一起看一下教程打...

  • 知乎怎么發表文章不被刪除,知乎怎么發表內容

    知乎怎么發表文章不被刪除,知乎怎么發表內容 相關圖片為什么在知乎上發文章老被刪智虎是一款非常實用的閱讀和學習軟件。在這個軟件中,用戶可以閱讀許多高質量的文章。那么如何發表文章呢?接下來,超人軟件編輯將介紹智虎iPhone上...

  • win7IP地址,win7哪里看ip地址

    win7IP地址,win7哪里看ip地址 相關圖片win7電腦ip地址在哪看在Internet上沖浪時,您一定遇到了由于IP地址沖突而無法鏈接網絡的問題。除了Windows 7系統和Windows xp系統炫目的界面、跳轉列表等功能外,如何更改電腦ip地址 win7...

  • image data,image轉data

    image data,image轉data 相關圖片no image將圖像資源轉換為Base64字符串格式并將其嵌入頁面或樣式中。這樣,甚至保存了圖像請求鏈接,例如:使用CSS代碼將內容復制到剪貼板/**數據格式**/data:base64轉formdata...

  • 幸運奪寶,奪寶幸運值

    幸運奪寶,奪寶幸運值 相關圖片王者奪寶幸運值滿幸運戰利品是一個非常實用的購物軟件。在這個軟件中,用戶有機會花一點錢,得到好的產品,但不可避免的是讓人們懷疑產品的質量。那么幸運戰利品真的能贏嗎?...

  • 錯誤0x8007045d,錯誤0x0000709

    錯誤0x8007045d,錯誤0x0000709 相關圖片0x80004005錯誤原因據超人小編介紹,雖然從win 10官方10240升級到win 10 Th2官方的安裝方法比其他升級容易,但并不意味著每個人在升級過程中都有問題。近日,有網友問小錯誤代碼0xc000000...

  • iconfont,iconfont怎么用

    iconfont,iconfont怎么用 相關圖片iconfontcdn因為移動設備有不同的分辨率、PPI等問題,所以經常需要針對不同的屏幕分辨率進行調整和優化,比如使用@2x圖片、最大寬度限制等使用[email protected] face來顯示icon卡...

  • 愛剪輯音頻導入,愛剪輯怎么去音頻

    愛剪輯音頻導入,愛剪輯怎么去音頻 相關圖片愛剪輯如何合成音頻愛情剪輯是一個非常有用的視頻剪輯工具。當我們剪輯視頻時,我們可以將音頻添加到視頻中,使其更加有趣。你知道,正確的音頻或背景音樂可以為小視頻添加很...

  • python的floor,python中floor函數

    python的floor,python中floor函數 相關圖片python的str本文主要介紹了Python通過floor函數舍棄小數點的方法,并結合實例分析了floor函數在Python中的作用和使用技巧。可以參考下面的示例來描述Pythoshape python...

  • 拼多多隨意取消訂單,拼拼多多怎樣取消訂單

    拼多多隨意取消訂單,拼拼多多怎樣取消訂單 相關圖片京東取消訂單當我們團購品多多時,有時因為信息錯誤或其他原因,怎么能取消訂單呢?如果你不知道如何取消訂單,讓我們看看超人小編提供的拼圖滴滴雙方都不取消訂單...

熱評文章

  • win7開機輸入法不啟動,win7任務欄沒有輸入法

    win7開機輸入法不啟動,win7任務欄沒有輸入法 相關圖片win7沒有輸入法語言欄了雖然win10系統已經發布了很長一段時間,但是很多用戶仍然使用win7系統。當然,win7系統在使用過程中總會遇到一些小問題。例如,在win7系統上電后,輸入方win7自...

  • 守護世紀,世紀守護登錄

    守護世紀,世紀守護登錄 相關圖片守護者世紀戰元免費世紀衛士是一款用于學校和家長雙向交流的學習軟件。在這里,你不僅可以檢查你的學習成績,還可以了解學校的一些情況。那么世紀衛士的查詢結果在哪里呢?編...

  • 3D圖形,3d圖形怎么做

    3D圖形,3d圖形怎么做 相關圖片3D繪圖它已經玩了兩三個星期了。它就像玩扁平的東西,所以它開始拋3D,因為帆布畫布仍然是平的,畢竟我們需要抽象一個Z軸有三維,然后三維坐標轉換成二維坐標,畫在畫布上,三...

  • 美拍我拍,美拍拍

    美拍我拍,美拍拍 相關圖片美拍怎么不能拍視頻了美派是一個短視頻社區,收集最新、最熱門、最新潮的視頻。視頻剪輯中不乏神仙,只是短短幾分鐘就構建了豐富的劇情,充滿了短片人物。美派安卓也可以錄制...

  • dw cs5,dwcs5asp

    dw cs5,dwcs5asp 相關圖片dwcs5安裝教程今天,當我打開CS5時,我發現沒有問題,但是當我打開文件時,DW提示xslt.htm的設置信息不正確。后來,我找了很長時間才把它解出來。讓我們刪除C:/docudwcs6使用方法...

  • 優步綁定的銀行卡怎么取消,如何解綁優步銀行卡

    優步綁定的銀行卡怎么取消,如何解綁優步銀行卡 相關圖片優步取消銀行卡綁定Uber是許多小伙伴手機中必備的騎乘軟件。很多小伙伴會選擇支付寶來買車,但如果支付寶沒有余額,你可以選擇用銀行卡支付。但在你付錢之前你得先綁好。Uber A...

  • 框架,Php框架

    框架,Php框架 相關圖片框架圖片大全SASS末尾的文件有更嚴格的格式要求。SCSS文件更接近本機CSS。例如,SASS文件的CSS代碼將內容復制到剪貼板主顏色:fff-邊欄邊框:1px實心相當于Shtml簡單框架代碼...

  • 優步待開票,每日優鮮怎么開票

    優步待開票,每日優鮮怎么開票 相關圖片每日優鮮發票類型如今,越來越多的人選擇使用Uber出租車當他們外出時。你知道Uber是怎么開發票的嗎?接下來,超人軟件將為您介紹如何申請Uber iPhone版本的發票。讓我們滴滴優享服務...

  • 愛剪輯字幕打字特效,愛剪輯字幕特效參數怎么固定

    愛剪輯字幕打字特效,愛剪輯字幕特效參數怎么固定 相關圖片如何在愛剪輯上添加字幕當你用愛的片段仔細剪輯一段視頻時,如果字幕是普通的,那就太糟糕了。事實上,愛情短片中有很多特效字幕,可以讓你的字幕效果熠熠生輝。向超人軟件站...

  • 海景卡通,卡通海景圖片

    海景卡通,卡通海景圖片 相關圖片卡通度假圖片這個例子向朋友介紹了使用焰火鼠標繪制一個新鮮的卡通海景。主要研究ALT鍵、紋理、發光工具和橡皮工具在焰火筆工具中的應用,希望能給朋友帶來幫助~~最終效果:(...

關注微信

变脸官网查询