CSS教程:網頁字體及字體大小的設計

2021-01-19 站長之家

字體大小

CSS2規範根據長度——水平和垂直尺寸——來定義字體。這個長度為一個數值,前面可能帶一個可選的加(+)或減(-)標記符。另外,該數值後可能有一個可選的單位標識符。
另外,CSS2規範定義了兩個單位類型:絕對單位和相對單位。絕對值指定單位,而相對單位指定一個與另一個值成比例的值。下面的列表列出了相對單位標識符:

em:元素字體的高度。它與使用該字體的元素的字體大小屬性計算值相等。當它出現在字體大小屬性值本身中時,會出現異常,這時它指母元素的字體大小。

ex(x-高度):CSS2規範將它描述為小寫字母x的高度。

px(像素):它與背景或屏幕的解析度有關。根據顯示器解析度輸出不同像素,由於用戶的喜好不同,顯示器的解析度可能會有很大差異。

下面是有效的絕對單位標識符:

以下為引用的內容:

  in(英寸)
  cm(釐米)
  mm(毫米)
  pt(點,1點=1/72英寸)
  pc(12點活字,1pc=12點)

測量絕對大小的另一種方法是使用衡量一個值的比例因數,應用以下關鍵字:最小、較小、小、中、大、較大和最小。中為基值,變小就減去一個因數,變大就增加一個因數,等等。CSS2規範定義的比例因數為1.2,這個值也可能依瀏覽器而變化。

還可以應用百分比值來格式化文本。百分比值是一個可選的標記符,即數字後帶有一個百分比符號(%)。百分比值總是與另一個值成比例。就字體而言,它與網頁的基本字體大小成一定比例。

如您所見,有許多方法可完成呈現文本這個看似簡單的任務。下面的HTML格式文本(在段落元素中)應用了各種單位標識符。其中所有的值都相等,並假定以72dpi進行顯示。

以下為引用的內容:

<html>
<head>
<title>Font Sizing - equal values</title>
</head>
<body>
<p style="font-size: 36pt;">Point</p>
<p style="font-size: 3pc;">Pica</p>
<p style="font-size: 0.5in;">Inches</p>
<p style="font-size: 1.27cm;">Centimeters</p>
<p style="font-size: 12.7mm;">Millimeters</p>
<p style="font-size: 300%;">Percentage</p>
</body>
</html>

相關焦點

  • 前端Web開發人員的CSS相對字體大小
    在本文中,我們將看幾種不同的方式,前端Web開發人員可以使用CSS操作其網頁的字體。網頁設計中最大的混亂之一是由font-size屬性造成的。在CSS中,可以使用多個單元,這只會導致設計人員額外頭痛。在本文中,我們將闡明這些單位的用法和任何誤解。PX Unit最常見和最受歡迎的單位是像素(像素)單位。
  • 網頁設計中各度量單位的比較
    首頁 > 教程 > 關鍵詞 > 網頁最新資訊 > 正文 網頁設計中各度量單位的比較
  • css font-family屬性設置元素的字體
    font-family屬性定義及用法在css中,font-family屬性是使用來規定元素的字體系列,把多個字體名稱作為一個「回退」系統來保存,如果瀏覽器不支持第一個字體,則會嘗試下一個。有兩種類型的字體系列名稱:指定的系列名稱:具體字體的名稱,比如:"times"、"courier"、"arial"。
  • CSS基礎—文字的尺寸、字體、行距及顏色
    font-size(尺寸)font-size樣式用於設置文字大小,單位有px(像素)、 em(相對值,以父元素的大小為基準單位)、rem(相對值,以根元素的大小為基準單位)。px的英文全稱是Pixels,中文名稱為像素,手機屏幕的解析度就是以像素為單位的,因此它是一個物理單位。使用px為單位的樣式會隨著顯示設備解析度的不同而發生大小變化。
  • 設計入門新手字體設計技巧教程
    本文由:「學設計上兔課網」原創,圖片素材來自網絡,僅供學習分享 設計入門新手字體設計技巧教程,設計師在日常工作中每天都在跟字體打著交道,視覺傳達的根本目的是傳播信息,文字是承載信息的關鍵要素。
  • 中英文字體大全80000種字體ps字體庫素材包系統字庫廣告設計
    中英文字體大全80000種字體ps字體庫素材包系統字庫廣告設計 PS百度是我們經常需要在日常軟體的工作和生活中使用,尤其是對於一個設計師。當我們設計的作品,如果已經有其他安排妥妥的,字體被難倒了,肯定不甘心。但現代和高的維權意識,近年來由於使用了字體和字體侵犯版權公司的問題也比較常見。
  • 網頁設計中美麗的字體組合25新鮮的例子
    印刷術是設計的一個非常重要的部分,為您的設計選擇合適的類型可能是非常具有挑戰性的。從印刷到網頁布局,排版是一個很好的設計的中心,今天我們收集了一些美麗的字體組合在網頁設計的例子來激勵你。在網頁設計中,排版可以採用不同的形式,大膽的標題,簡潔的菜單,說明文字等等。
  • 網頁設計中的 serif 和 sans-serif字體應用
    網頁設計中的 serif 和 sans-serif字體應用。Howdy, 大家好,又是我~上一次我們簡單的談了一下font set和一些要注意的基本問題。今天我們繼續字體這一話題,深入講講上次提到的「通用字體族」。
  • UI設計CSS網頁基本單位知多少?奇酷學院告訴你
    想要成為一名合格的前端工程師,會寫頁面絕對不能少,而如果想要頁面寫得出彩,你必須要知道一些網頁常用的基本單位。在傳統的項目開發中,我們常常會用到px、%、em這幾個單位,因為它能適用於大部分的項目開發,而且擁有比較良好的兼容性。但素,你造嗎?
  • 免費小說大全怎麼調整字體大小?調整的方法
    今天講解的是免費小說大全調整字體大小的具體操作,想學習免費小說大全調整字體大小的操作教程的,就去下文看一看,了解了解,相信對大家一定會有所幫助的。免費小說大全軟體版本:4.0.3.0Android軟體立即查看免費小說大全調整字體大小的具體操作1、如果是想來調整免費小說大全中的字體大小,你需要先點擊搜索自己想看的小說,進入其閱讀頁面中。2、然後在閱讀頁面裡點擊進行閱讀,進入到小說觀看頁面裡,去進行字體的設置。
  • 系統字體大小
    系統字體大小 生活工具 大小: 3.74M
  • 學習CSS了解單位em和px的區別
    首頁 > 教程 > 關鍵詞 > 最新資訊 > 正文 學習CSS了解單位em和px的區別
  • PS字體設計:霓虹字
    其實在PS中,霓虹字的設計非常簡單,下面一起來看下教程吧!霓虹字的設計1、在PS中新建一個1000*600px的文檔,背景色設置為黑色。用橫排蒙版文字工具輸入「霓虹燈」三個字,CTRL+A全選,把字體調節到合適大小(註:移動蒙版文字必須全選文字後滑鼠放在全選文字下方才能移動)
  • 前端工程化(ES6模塊化和webpack打包css,less,scss,圖片,字體...
    瀏覽器中訪問http://localhost:8080地址,查看自動打包效果*/注意/* webpack-dev-server 會啟動一個實時打包的http伺服器 webpack-dev-server 打包生成的輸出文件,默認放到了項目根目錄中,而且是虛擬機的,看不見的 在自動打包完畢之後,默認打開伺服器網頁,實現方式就是打開package.json文件,修改dev命令:
  • 碧藍航線彩色字體怎麼打出來 彩色字體代碼大全
    碧藍航線彩色字體怎麼打出來的?碧藍航線有玩家發現聊天中可以發送碧藍航線彩色字體。很多網友都想知道碧藍航線彩色字體怎麼發,下面小編為大家帶來碧藍航線彩色字代碼教程!碧藍航線彩色字體聊天代碼:顏色就是一般的英文對應的顏色。
  • 修改蘋果手機字體,panto英文字體 For IOS13 縮小85%
    更新:1.修復英文字體過小的問題2.修復縮小版字體在某些APP中顯示異常的問題。例如:在拼多多上有些地方不是顯示文字,顯示的是「……」。3.修復原生鍵盤候選文字只有一個字和組詞時,前後大小不一致的問題。替換字體教程:替換字體詳細教程要求:1.蘋果手機要求已經越獄。
  • 字體設計六大技法
    無可否認,字體設計越來越受到平面設計師青睞,學會字體設計,可以增添版面的視覺美,讓整體畫面檔次升高,也可以作為一個獨立分支,專門為需要字體設計的行業服務,例如網絡小說中的封面設計。想學好字體設計,前提條件是對矢量軟體精通,CDR\AI有一方面已足夠。
  • word字體無限放大或縮小的技巧
    本篇將介紹word字體無限放大和無限縮小的教程,有興趣的朋友可以了解一下!word字體無限放大或縮小的技巧word字體無限放大或無限縮小使用常規方法也能實現,只是使用常規方法不利於觀察字體放大或縮小時的變化
  • [設計乾貨]十款商用免費字體,遠離字體侵權糾紛
    圖片來源:手淘網絡設計,轉載請註明(圖片來源:手淘網絡設計,轉載請註明)2.思源宋體思源宋體是Adobe Type發布的字體,它是對應思源黑體的宋體字體,包含了簡體、繁體、日文、韓文四種漢字寫法圖片來源:手淘網絡設計,轉載請註明(圖片來源:手淘網絡設計,轉載請註明)5.站酷字體站酷字體合集是一款電腦字體包,該字體庫是一套公益項目,堪稱業界良心,其中每一套字體都很不錯。
  • 適合設計師使用的英文字體分享
    今天給大家分享一些英文字體,擁有一些好看又耐用的英文字體,可以快速的幫助我們完成設計項目,今天給大家分享一些適合無襯線字體,襯線字體等等。適合設計師排版,名片設計,banner設計或者是logo設計,當然具體使用場景也可以根據字體的風格以及項目實際情況去使用。