1. 程式人生 > >CSS:字型樣式(字體系列、大小、加粗、風格、變形等)

CSS:字型樣式(字體系列、大小、加粗、風格、變形等)

CSS 字型屬性定義文字的(如斜體)和變形(如小型大寫字母)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<head>
  <style>
    body {font-family:sans-serif;font-size:100%}
    h1 {font-family:monospace;}
    h3 {font-family:Georgia,serif;}

    p.italicFont {font-style:italic;}
    p.obliqueFont {font-style:oblique;}

    p.normalVariant {font-variant:normal}
    p.smallCaps {font-variant: small-caps}

    p.bold100{font-weight:100}
    p.bold900{font-weight:900}

    p#pix16{font-size:16px}
    p#pix20{font-size:20px}

    p#em0_8{font-size:0.8em}
    p#em1{font-size:1em}
    p#em2{font-size:2em}

    div#bg_01 {background-color:#cff}
    div#bg_02 {background-color:#fcf}

  </style>
</head>

<!--CSS 字型屬性定義文字的字體系列、大小、加粗、風格(如斜體)和變形(如小型大寫字母)。-->
<title>CSS 字型</title>

<h1>這是h1標題,將應用monospace字型。</h1>
<p>這是一個普通的段落,將應用指定於body的通用字型:sans-serif</p>

<!--建議在所有 font-family 規則中都提供一個通用字體系列。這樣就提供了一條後路,在使用者代理無法提供與規則匹配的特定字型時,就可以選擇一個候選字型。-->
<h3>h5標題:Georgia字型(若電腦中無該字型,則以serif字型顯示)</h3>

<!--字型風格-->
<p class="italicFont">文字斜體顯示<p>
<p class="obliqueFont">文字傾斜顯示<p>
<p>注:通常情況下,italic 和 oblique 文字在 web 瀏覽器中看上去完全一樣。</p>

<hr/>
<!--字型變形-->
<h3>字型變形</h3>
<p class="normalVariant">This is a paragraph.<p>
<p class="smallCaps">“小寫字母轉為大寫字母,字型大小不變:”:This is a paragraph.<p>

<h3>字型加粗</h3>
<p class="bold100">font-weight:100的文字。</p>
<p class="bold900">font-weight:900的文字。</p>

<hr/>
<!--字型大小-->
<h3>字型大小,絕對值:px 相對值:em (1em 等於當前的字型尺寸)</h3>
<div id="bg_01">
  <p id="pix16">文字大小:16px</p>
  <p id="pix20">文字大小:20px</p>
</div>
<div id="bg_02">
  <p id="em0_8">文字大小:0.8em</p>
  <p id="em1">文字大小:1em</p>
  <p id="em2">文字大小:2em</p>
</div>

</html>
效果圖:


相關推薦

CSS字型樣式體系大小風格變形

CSS 字型屬性定義文字的(如斜體)和變形(如小型大寫字母) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

CSS文字樣式縮排/對齊/字元間隔/文字裝飾/空白格處理

通過CSS樣式,可以設定文字的縮排,對齊,字元間隔等屬性。 程式碼整理自w3school:http://www.w3school.com.cn <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN

POJ 3687Labeling Balls優先隊+拓撲排序

avi sat 一個 排序 com script memory std from id=3687">Labeling Balls Time Limit: 1000MS Memory Limit: 65536K T

css實現線條樣式中間高亮,兩邊透明

div height round width eight style near 中間 樣式 .line{ width: 100%; height: 2px; background: linear-gradient( to

CSS 設定字型樣式為自己下載的個性字型

一般情況下設定字型樣式“font-family”都是電腦自帶的字型,如果想要用一些個性字型就要從網上下載使用了: 下載字型地址:http://font.chinaz.com/zhongwenziti_2.html  (有很多這樣的網站,在此我就找了一個) 選擇自己喜歡的樣式,

css設定字型樣式

font-family: 字型型別 (隸屬,宋體,新羅馬,…) 該字型型別設定 依賴於 當前作業系統中 已安裝的字型 庫, 如果 所設定的 字型型別 在 系統中能 查到, 則 啟用該字型 如果 所設定的字型 型別 在 系統中 找不到, 則 使用預設字型 字型型別

10.1拓展之載入樣式圓內轉個不停

(2018/12/21  0:21 使用推薦插入程式碼功能報錯) HTML程式碼: <div class="circle"></div> CSS程式碼: html, body, .circle{ height: 100%; disp

Css字型樣式屬性大全

CSS 屬性: 字型樣式(Font Style) 1 字型樣式 {font:font-style font-variant font-weight font-size font-family} 2 字型型別 {font-family:"字型1","字型2","字型3"

CSS外部樣式表/內部樣式表/內聯樣式

在html中,引用CSS樣式有3中方式:外部樣式表,內部樣式表,內聯樣式。 本文程式碼整理自w3school:http://www.w3school.com.cn (1)外部樣式表,指在html檔案的head標籤中,使用link引用另一個css檔案中定義的樣式。如果某個樣式

CSS絕對居中樣式不論視窗尺寸

實現效果: 不管視窗尺寸大小,都可以實現水平和垂直居中 程式碼如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>居中效果

css選擇器標籤ID萬用字元

1、css概述 主要的使用場景就是美化網頁,佈局頁面 (1)html的侷限性 它只關注內容的語義,只能做一些簡單的樣式,並且非常的臃腫和繁瑣 (2)css對網頁美化的作用 css是層疊樣式表的簡稱,它和html是一樣的,都是一種標記語言,css主要用於設定html頁面的文字內容(字型、大小、對齊方式等)圖片的

Python全棧學習筆記day 17遞迴函式之二分法老男孩Python全棧學習s9 day17 二分法程式有些問題

遞迴函式 遞迴 : 在函式中呼叫自身函式 最大遞迴深度預設是997/998 —— 是python從記憶體角度出發做得限制 二分法: 實現程式: 最基礎版:(很多問題:切分導致出現了新列表,無法返回元素在 l 中的位置) l = [2,3,5,10,15,16,

Linux網路基礎網路發展,協議,通訊協議,模型,封裝分用

目錄 網路發展 網路協議 網路發展 獨立模式:計算機之間相互獨立 網路互聯:多臺計算機連線在一起,完成資料共享 區域網LAN: 計算機數量多了,通過交換機和路由器連線在一起 區域網WAN:將距離很遠的計算機連在一起 網路協議 IP地址:在網路上

cmake工具使用簡明教程基於命令和gui,編譯到windows和linux雙平臺

cmake可以用來構建跨平臺的專案,本文簡要講解針對多目錄原始碼專案使用cmake構建和編譯的方法。 專案結構 整個工程多目錄多檔案組織而成,其中build目錄用於生成各平臺解決方案檔案的,程式碼如下 bird.h class bird

Java JVM 8垃圾回收GC 在什麼時候,對什麼東西,做了什麼事情

在什麼時候 首先需要知道,GC又分為 minor GC 和 Full GC (也稱為 Major GC )。Java 堆記憶體分為新生代和老年代,新生代中又分為1個 Eden 區域 和兩個 Survivor 區域。 那麼對於 Minor GC 的觸發條件:大

c++學習筆記動態規劃最長公共子序列,01揹包問題,金錢兌換問題

/* 參考書:演算法設計技巧與分析 M.H.Alsuwaiyel著 吳偉旭 方世昌譯 ---------------------------------------------------------------- 1.遞迴 將問題分成相似的子問題 1.1Fa

PHP 常量PHP 變量全解析超全局變量變量的8種數據類型

ret each 回收 操作系統 js xml name static bject 單獨 常量特點 常量一旦被定義就無法更改或撤銷定義。 常量名不需要開頭的$ 與變量不同,常量貫穿整個腳本是自動全局的。 作用域不影響對常量的訪問 常量值只能是字符串或數字 設置 PHP

Vue.js常用指令匯總v-if//v-show//v-else//v-for//v-bind//v-on

ont ner 技術分享 數組 div 區別 art space alt 有時候指令太多會造成記錯、記混的問題,所以本文在記憶的時候會采用穿插記憶的方式,交叉比對,不易出錯。 本文主要講了一下六個指令: v-if//v-show//v-else//v-for//v-bi

TextView 動態設定字型大小

//字型大小為16,並且加粗 tv_1.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16); tv_1.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));

學以致用——Java原始碼——拋雙骰兒遊戲綜合評估遊戲步數與勝率的關係,公平性,平均步數Game of Craps Evaluation

相比2008年版的需求,這次增加了不少功能。 程式的執行結果可以告訴我們以下問題的答案: a) How many games are won on the first roll, second roll, …, twentieth roll and after the twentieth