您現在的位置是:電腦技術吧?>? 編程技術 ??>??fontsize屬性,font和fontsize??>??正文詳情

fontsize屬性,font和fontsize

伊秀敏2019-11-14 16:41:11 人圍觀
簡介css font size基本語法結構:字體大小 字體大小值 單位字:字體大小語法:字體大小:絕對大小|相對大小|長度值:x x small | x smallfontsize單位html5

基本語法結構:  Font-size 字體大小數值 單位  單詞:font-size  語法:font-size : absolute-size | relative-size | length  取值:xx-small | x-small | small | medium | large | x-large | xx-large  xx-small:最小  x-small:較小  small:小  medium:正常(默認值),根據字體進行調整  large:大  x-large:較大  xx-large:最大  也可取具體長度單位值  可用的單位  有幾種不同的方法可以在CSS中聲明字體大小。

總的來說,這些單位分為兩類相對和絕對。

絕對單位(大多)是固定的,并且涉及到一些物理的測量。

他們一旦被聲明,將不能通過改變其他元素的字體大小來改變他的大小。

  相對單位沒有一個客觀的測量。

相反,它們的實際大小是通過父元素的尺寸來確定的。

這意味著他們的大小可以通過改變相關元素的大小來改變。

  下面是一些單位的概要描述

  在這里你可以看到單位的詳細列表,但我將專注于我認為最常用的單位px, pt, %, em, rem, 和 vw。

  他們有什么區別?  這些單位之間的差異可能很難通過概念理解,所以最好的方式就是通過例子來展示他們之間的差異。

  例子1默認設置  在一個空白的HTML文檔內,你沒有任何關于字體大小的聲明而只使用默認設置。

在大多數瀏覽器上為html和body標簽的默認字體大小為100%。

這等同于如下算式  CSS Code復制內容到剪貼板  100% = 1em = 1rem = 16px = 12pt  這意味著如果你為一個標簽設置字體大小為100%,另一個為16px,他們將以相同的大小呈現在屏幕上。

你可以在這里看到這個證明

  例子2絕對單位VS相對單位  絕對和相對單位之間的差異可以通過改變html的字體大小來突出顯示。

如果我們設置html{font-size:200%},這將只影響用相對單位設置的字體的大小。

  這是使用相對單位的一個重要優勢。

有了如此輕易縮放字體大小的功能,你可以通過只改變html字體大小來創建一個真正具有響應性的網站。

這里有一個很好的例子  例子3REM VS EM(和%)  em(和%)單位是通過計算父元素的字體大小來顯示當前的字體大小。

比如  CSS Code復制內容到剪貼板  html {  font-size: 100% /* =16px */  }  body {  font-size: 2em; /* =32px */  }  p {  font-size: 1em; /* =32px */  /* font-size: 0.5em; =16px */  }  因為p繼承body,body繼承html,所以我們可以計算出以em和%設置的段落字體大小變成(默認大小)兩倍。

  當你為一個元素使用em單位時,你必須考慮到所有父元素的字體大小。

正如你看到的,這很容易(讓字體大小的計算)變得復雜而凌亂。

  解決這個問題的便是rem。

rem是基于html元素的字體大小而不是父元素。

比如  CSS Code復制內容到剪貼板  html {  font-size: 100% /* =16px */  }  body {  font-size: 2rem; /* =32px */  }  p {  font-size: 1rem; /* =16px */  }  使用rem可以讓你擁有em和%的縮放能力而無需處理嵌套問題。

  例子4視口寬度大小  vw是CSS3新加入的一個使用視口寬度來計算字體大小的單位。

這樣可以允許更多的響應字體大小。

  盡管這似乎是為響應式設計的一個很有用的單位,但我個人不是它的粉絲。

因為它并不能在字體大小上給我更多的控制權,他總是顯示的過大或過小。

  我的方法  在我做這項研究之前,我一直使用像素來設置我的字體大小。

這是因為現在的大多數瀏覽器允許用戶在字體太小的情況下自行放大頁面,所以使用像素并沒有什么問題。

  但是,我發現這種方式在很大程度上限制了擴展能力。

雖然我的字體在中小屏幕上看起來不錯,但他應該在大屏幕上有更好的優化。

即便用戶有放大的選項,這也不應該是我們希望他們來做的事情。

  因此我使用rem設置的解決方案是(使用像素作為備用)。

  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%;  }  }  這個方法是用像素作為降級單位因為IE8及以下不支持rem。

這有一個問題是當我改變基礎字體大小時只能應用在可擴展性大小上面而不適用于后備字體大小。

不過我不認為這是一個巨大的問題,因為這個問題對于較大規模的設備的核心來說只是一個額外的問題。

  如果你有任何關于如何改善這個問題的想法,請在評論里讓我知道。

我也可以寫一個SCSS的混入,這樣我可以不必輸入這兩個后備和rem單位。

版權聲明:本文由 伊秀敏 整理編輯。

原標題:font的size屬性最大值,fontsize的范圍

轉載注明出處:http://www.dn9ww09s.icu/program/12217.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • cmd.exe應用程序出錯,cmd應用程序

    cmd.exe應用程序出錯,cmd應用程序 相關圖片運行cmd文件閃退有網友遇到cmd.exe應用程序錯誤,系統無法運行,無法打開該批處理文件清理垃圾;通過360檢查沒有發現病毒,想使用360系統急救包,但點擊后沒有反應,所以不知cmd ex...

  • 向日葵 遠程控制,向日葵遠程控制怎么用

    向日葵 遠程控制,向日葵遠程控制怎么用 相關圖片向日葵遠程控制連不上當我們實施遙控時,我們感到由計算機攜帶的遙控器不易操作。我們可以使用向日葵遙控軟件。它是一個完全免費的個人電腦管理和服務軟件,為企業或專業人士...

  • 哪里有時空隧道,有時空隧道嗎

    哪里有時空隧道,有時空隧道嗎 相關圖片地球上的時空隧道Flash本身是一個二維動畫制作軟件,不能直接制作三維效果。有時我們需要三維效果來反映作品。我們怎么做?我們可以在flash中使用一些小技巧,并配合強大的動作腳...

  • 藍屏代碼大全,win7藍屏代碼大全

    藍屏代碼大全,win7藍屏代碼大全 相關圖片藍屏代碼0x000007e計算機的藍屏,也稱為藍屏崩潰,是一種在系統錯誤無法恢復時顯示的屏幕圖像。突然,電腦的藍屏是一件很煩人的事情,但是如果你仔細看,你會發現一些東西,也就...

  • 網頁制作,網頁制作步驟

    網頁制作,網頁制作步驟 相關圖片dw網頁制作視頻教程作為一個網站,超鏈接必須有許多頁面。如果頁面彼此獨立,那么頁面就像島嶼一樣。這樣的網站不能運行。為了在網頁之間建立鏈接,我們必須使用超鏈接。它之所...

  • 怎么看電腦的ip地址,如何查電腦ip地址

    怎么看電腦的ip地址,如何查電腦ip地址 相關圖片ip地址是什么在我們日常使用計算機時,我們經常需要檢查自己計算機的IP地址。當然,這對很多人來說是最簡單的,但對很多不太熟悉電腦的人來說,這只是在云端。在這種情況下,小...

  • 開機顯示器不亮,開機顯示器沒反應

    開機顯示器不亮,開機顯示器沒反應 相關圖片電腦開機顯示器和鍵盤都不亮網友問小編,電腦可以開機,但顯示器不亮,確保線路沒有問題,如果主板后面的監控燈(調試燈)不亮,我該怎么辦?一天一次,會很煩人,怎么解決這...

  • 走腎不走心,走腎不走心1-12

    走腎不走心,走腎不走心1-12 相關圖片僧侶走腎不走心8目前,我國多個大型電子商務平臺日趨完善,呈現多家優勢融合的趨勢。另一方面,國外高質量的電子商務網站大多有自己的風格和不同的設計方向。這些個性和堅持讓...

  • 黑屏系統,進入系統黑屏

    黑屏系統,進入系統黑屏 相關圖片黑屏怎么解決電腦開機后,黑屏無法進入系統。我不知道怎么解決。實際上,黑屏是最常見的引導失敗之一。我們可以嘗試在安全模式下修復黑屏問題。如何解決這個問題?針對這種情...

  • html5的大綱,html5網頁設計大綱

    html5的大綱,html5網頁設計大綱 相關圖片html5css3教案? /**可折疊輪廓*類名樹*存儲位置xZn/HTML/tree。PHP*/**節點類*用于在樹中保存相關參數**@param$ID節點號*@param$texhtml5網頁設計報告...

熱評文章

  • 電腦有病毒怎么辦,電腦進病毒了怎么辦

    電腦有病毒怎么辦,電腦進病毒了怎么辦 相關圖片電腦中病毒按f8也不行很多朋友想知道電腦里的病毒。為了幫助你更好地了解電腦中的病毒,今天的編輯將分享一個關于電腦中病毒的故事,希望能對你有所幫助。電腦里的病毒呢?電腦...

  • 走腎不走心,走腎不走心1-12

    走腎不走心,走腎不走心1-12 相關圖片僧侶走腎不走心8雙11剛過,雙12又來了。網上購物在世界各地都在增長,特別是在中國。盡管淘寶、京東、亞馬遜等主流電子商務平臺仍占據主流地位,但小型電子商務購物平臺的生存空...

  • teamviewer 破解版,teamviewer 安卓破解版

    teamviewer 破解版,teamviewer 安卓破解版 相關圖片teamviewer14安卓破解計算機遠程控制在今天得到了廣泛的應用。一個可以穿透內部網的遠程工具,可以隨時連接和斷開連接,可能是您的最佳選擇。這是團隊觀眾破解版。也許很多網友對...

  • 選中當前頁面的快捷鍵,怎么設置當前頁面頁碼

    選中當前頁面的快捷鍵,怎么設置當前頁面頁碼 相關圖片怎么樣設置頁碼The code is as follows: - Moz user selection: none; - WebKit user selection: non設置頁碼起始頁...

  • diy電腦,電腦diy吧

    diy電腦,電腦diy吧 相關圖片自制電腦機箱很多朋友認為自己動手是件麻煩的事。他們不僅對專業知識有一定的要求,而且了解相關的硬件知識,這也讓很多朋友找到熟人安裝或干脆購買品牌機器。其實,小編可以...

  • flash頁面,flash登錄頁面

    flash頁面,flash登錄頁面 相關圖片flash插件怎么啟用將原始的direct wmode更改為opaque,代碼如下!DOCTYPE HTMLHTML lang=enheadmet charset=UTF-8/titflash 整站...

  • 向日葵遠程控制軟件,向日葵遠程控制軟件怎么用

    向日葵遠程控制軟件,向日葵遠程控制軟件怎么用 相關圖片向日葵遠程控制電腦怎么用Sunflower遠程控制軟件是一款完全免費的面向企業或專業人士的PC管理和服務軟件。它具有5秒快速強大的內部網絡滲透能力,可以方便地控制和訪問安裝了sunf...

  • 電腦沒有聲音了怎么恢復,如何恢復電腦的聲音

    電腦沒有聲音了怎么恢復,如何恢復電腦的聲音 相關圖片電腦不出聲音怎么解決在計算機的日常使用中,經常會遇到計算機的小故障而沒有聲音。你是怎么解決的?一般來說,我們首先用軟件處理計算機故障,然后用硬件處理。因為有很多原...

  • 動態,動態GIF

    動態,動態GIF 相關圖片放大鏡本文利用Flash 8制作動態放大鏡。當放大鏡在屏幕上移動時,放大鏡下的圖片會被放大并顯示出來,非常有趣!提示:用鼠標移動放大鏡,放大鏡下的圖片將被放大顯示。生放大鏡...

  • win10小馬激活,小馬激活工具win10

    win10小馬激活,小馬激活工具win10 相關圖片win7激活Windows 10在我們的生活中越來越普遍。我看到其他人成功地安裝和使用它。我想我也安裝了一個win10來使用。我終于安裝好了。但我發現安裝的win10沒有激windows不激活會怎么樣...

關注微信

变脸官网查询