欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS中的font-size屬性使用教程

w3cplus   發(fā)布時(shí)間：2015-08-13 18:13:41   作者：婼籽   我要評(píng)論
這篇文章主要介紹了CSS中的font-size屬性使用教程,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下

基本語(yǔ)法結(jié)構(gòu)：

Font-size+字體大小數(shù)值+單位
單詞：font-size
語(yǔ)法：font-size : absolute-size | relative-size | length
取值：xx-small | x-small | small | medium | large | x-large | xx-large
xx-small:最小
x-small:較小
small:小
medium:正常(默認(rèn)值)，根據(jù)字體進(jìn)行調(diào)整
large:大
x-large:較大
xx-large:最大
也可取具體長(zhǎng)度單位值


可用的單位

有幾種不同的方法可以在CSS中聲明字體大小。總的來(lái)說(shuō)，這些單位分為兩類——相對(duì)和絕對(duì)。 絕對(duì)單位（大多）是固定的，并且涉及到一些物理的測(cè)量。他們一旦被聲明，將不能通過(guò)改變其他元素的字體大小來(lái)改變他的大小。

相對(duì)單位沒(méi)有一個(gè)客觀的測(cè)量。相反，它們的實(shí)際大小是通過(guò)父元素的尺寸來(lái)確定的。這意味著他們的大小可以通過(guò)改變相關(guān)元素的大小來(lái)改變。

下面是一些單位的概要描述——
2015813181741966.jpg (961×544)

在這里你可以看到單位的詳細(xì)列表，但我將專注于我認(rèn)為最常用的單位——px, pt, %, em, rem, 和 vw。
他們有什么區(qū)別？

這些單位之間的差異可能很難通過(guò)概念理解，所以最好的方式就是通過(guò)例子來(lái)展示他們之間的差異。
例子1——默認(rèn)設(shè)置

在一個(gè)空白的HTML文檔內(nèi)，你沒(méi)有任何關(guān)于字體大小的聲明而只使用默認(rèn)設(shè)置。在大多數(shù)瀏覽器上為html和body標(biāo)簽的默認(rèn)字體大小為100%。這等同于如下算式——

CSS Code復(fù)制內(nèi)容到剪貼板
  1. 100% = 1em = 1rem = 16px = 12pt  

這意味著如果你為一個(gè)<p>標(biāo)簽設(shè)置字體大小為100%，另一個(gè)<p>為16px，他們將以相同的大小呈現(xiàn)在屏幕上。你可以在這里看到這個(gè)證明——
2015813181804021.png (585×337)

例子2——絕對(duì)單位VS相對(duì)單位

絕對(duì)和相對(duì)單位之間的差異可以通過(guò)改變html的字體大小來(lái)突出顯示。如果我們?cè)O(shè)置html{font-size:200%}，這將只影響<p>用相對(duì)單位設(shè)置的字體的大小。

這是使用相對(duì)單位的一個(gè)重要優(yōu)勢(shì)。有了如此輕易縮放字體大小的功能，你可以通過(guò)只改變html字體大小來(lái)創(chuàng)建一個(gè)真正具有響應(yīng)性的網(wǎng)站。這里有一個(gè)很好的例子
例子3——REM VS EM（和%）

em（和%）單位是通過(guò)計(jì)算父元素的字體大小來(lái)顯示當(dāng)前的字體大小。比如——

CSS Code復(fù)制內(nèi)容到剪貼板
  1. html {   
  2.   font-size: 100% /* =16px */  
  3. }   
  4. body {   
  5.   font-size: 2em; /* =32px */  
  6. }   
  7. p {   
  8.   font-size: 1em; /* =32px */  
  9.   /* font-size: 0.5em; =16px */  
  10. }  

因?yàn)閜繼承body,body繼承html，所以我們可以計(jì)算出以em和%設(shè)置的段落字體大小變成（默認(rèn)大?。﹥杀?。
2015813182023968.png (591×443)

當(dāng)你為一個(gè)元素使用em單位時(shí)，你必須考慮到所有父元素的字體大小。正如你看到的，這很容易（讓字體大小的計(jì)算）變得復(fù)雜而凌亂。

解決這個(gè)問(wèn)題的便是rem。rem是基于html元素的字體大小而不是父元素。比如——

CSS Code復(fù)制內(nèi)容到剪貼板
  1. html {   
  2.   font-size: 100% /* =16px */  
  3. }   
  4. body {   
  5.   font-size: 2rem; /* =32px */  
  6. }   
  7. p {   
  8.   font-size: 1rem; /* =16px */  
  9. }  

使用rem可以讓你擁有em和%的縮放能力而無(wú)需處理嵌套問(wèn)題。
例子4——視口寬度大小

vw是CSS3新加入的一個(gè)使用視口寬度來(lái)計(jì)算字體大小的單位。這樣可以允許更多的響應(yīng)字體大小。

盡管這似乎是為響應(yīng)式設(shè)計(jì)的一個(gè)很有用的單位，但我個(gè)人不是它的粉絲。因?yàn)樗⒉荒茉谧煮w大小上給我更多的控制權(quán)，他總是顯示的過(guò)大或過(guò)小。

我的方法

在我做這項(xiàng)研究之前，我一直使用像素來(lái)設(shè)置我的字體大小。這是因?yàn)楝F(xiàn)在的大多數(shù)瀏覽器允許用戶在字體太小的情況下自行放大頁(yè)面，所以使用像素并沒(méi)有什么問(wèn)題。

但是，我發(fā)現(xiàn)這種方式在很大程度上限制了擴(kuò)展能力。雖然我的字體在中小屏幕上看起來(lái)不錯(cuò)，但他應(yīng)該在大屏幕上有更好的優(yōu)化。即便用戶有放大的選項(xiàng)，這也不應(yīng)該是我們希望他們來(lái)做的事情。

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. html {   
  2.   font-size: 62.5%; /* sets the base font to 10px for easier math */  
  3. }   
  4. body {   
  5.   font-size: 16px;   
  6.   font-size: 1.6rem;   
  7.   /* sets the default sizing to make sure nothing is actually 10px */  
  8. }   
  9. h1 {   
  10.   font-size: 32px;   
  11.   font-size: 3.2rem;   
  12. }  

這樣我擴(kuò)大了字體大小而只需要這樣寫——

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @media screen and (min-width: 1280px) {   
  2.   html {   
  3.     font-size: 100%;   
  4.   }   
  5. }  

這個(gè)方法是用像素作為降級(jí)單位因?yàn)镮E8及以下不支持rem。這有一個(gè)問(wèn)題是當(dāng)我改變基礎(chǔ)字體大小時(shí)只能應(yīng)用在可擴(kuò)展性大小上面而不適用于后備字體大小。不過(guò)我不認(rèn)為這是一個(gè)巨大的問(wèn)題，因?yàn)檫@個(gè)問(wèn)題對(duì)于較大規(guī)模的設(shè)備的核心來(lái)說(shuō)只是一個(gè)額外的問(wèn)題。

如果你有任何關(guān)于如何改善這個(gè)問(wèn)題的想法，請(qǐng)?jiān)谠u(píng)論里讓我知道。我也可以寫一個(gè)SCSS的混入，這樣我可以不必輸入這兩個(gè)后備和rem單位。

相關(guān)文章

  • css中一些常用的font-size字體單位和line-height詳解

    這篇文章主要介紹了css中一些常用的font-size字體單位和line-height的相關(guān)知識(shí)，給大家提到了px(pixel)像素的一些小知識(shí)，本文通過(guò)實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，感
    2020-05-20

  • 詳解使用 CSS 的 font-size-adjust 屬性改善網(wǎng)頁(yè)排版

    本篇文章主要介紹了使用 CSS 的 font-size-adjust 屬性改善網(wǎng)頁(yè)排版，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-09-18

  • CSS的font-size屬性及其em值的使用

    這篇文章主要介紹了CSS的font-size屬性及其em值的使用,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
    2015-08-05

  • CSS Font-Size: em、px 、pt 、Percent之間的關(guān)系及換算

    這篇文章主要介紹了CSS Font-Size: em、 px 、pt 、Percent之間的關(guān)系及換算，本篇整理的還是比較詳細(xì)的，需要的朋友可以參考下
    2014-05-15

  • css font-size屬性說(shuō)明

    CSS的字體樣式設(shè)置相信許多人再熟悉不過(guò)，其實(shí)字體樣式的設(shè)置并不僅僅限于我們平時(shí)常用的那幾個(gè)屬性，本文為您詳細(xì)敘述 font-size 的字體樣式設(shè)置的詳細(xì)屬性。
    2009-08-29

  • 一行代碼搞定 font-size 響應(yīng)式

    這篇文章主要介紹了一行代碼搞定 font-size 響應(yīng)式,該屬性設(shè)置元素的字體大小,font-size 屬性可設(shè)置字體的尺寸,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2023-05-09

最新評(píng)論