歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > DIV+CSS基礎 >

使用DIV+CSS讓英文單詞全大寫之CSS font-variant英文字母全大寫后縮小字體篇

平時我們會遇到在一篇文章中遇到英文單詞或英文字母,但又想讓這些字母無論是半角小寫還是大寫,統一讓這些英文字母全變成大寫,此時我們就可以使用CSS來讓其英文字母變成全大寫但字母會被縮小。此時我們就需要用到DIV CSS中樣式屬性font-variant

目錄
  1. css font-variant語法
  2. DIV+CSS font-variant實例
  3. CSS教程總結

一、css font-variant語法   -   TOP

font-variant : normal | small-caps

CSS參數:
normal : 正常的字體
small-caps : 讓字母變成小型的大寫字母字體并縮小字母

css手冊介紹:font-variant手冊 http://www.5015168.live/shouce/c_fontvariant.shtml

二、DIV+CSS font-variant實例   -   TOP

DIVCSS5描述:
我們通過DIV CSS讓文章中英文單詞或字母都變大寫并縮小顯示。

Css樣式選擇器我們命名為divcss5,在html中用class引用。
1、CSS代碼

  1. .divcss5{font-variant:small-caps} 

2、HTML代碼片段

  1. <div class="divcss5"> 
  2. font-variant:small-caps實現英文或拼音字母全大寫并縮小字形顯示 
  3. </div> 

3、案例結果截圖

 CSS font-variant:small-caps大寫字母并縮小案例截圖
在DW軟件中字體只被大寫,而在瀏覽器中將會縮小并大寫字體

通過css讓英文或拼音字母全大寫效果截圖

說明:注意DIVCSS5對象內內容,被css設置font-variant后,對象內所有無論是大寫字母還是小寫字母,最終全顯示為大寫的字母。

三、CSS教程總結   -   TOP

在我們日常制作網頁時候,文章內插入英文教多是,需要對文章內英文字母顯示大寫的字母的時候我們就可以使用css樣式表font-variant屬性實現這一目的。

font-variant將文本里英文轉為全大寫,并以縮小方式顯示。css font-variant實現全大寫但英文或拼音字母會被縮小,如果要實現CSS英文只大寫而不縮小請用css text-transform字體大小寫樣式。

另外CSS樣式教程讓文章英文或拼音字母變全大寫之CSS text-transform

以上是通過CSS樣式讓對象內容中出現無論大小寫字母全變成大寫字母。

擴展閱讀:
1、字間距(css letter-spacing):http://www.5015168.live/rumen/r75.shtml
2、CSS文字大小css font-size):http://www.5015168.live/rumen/r74.shtml#no1
3、CSS加粗\文字加粗CSS font-weight|div css font-weight|font-weight):http://www.5015168.live/rumen/r122.shtml
4、首字母大寫text-transform
5、字母全小寫
6、CSS英文字母全大寫
7、CSS英文字母小寫
8、CSS首字母大寫

如需轉載,請注明文章出處和來源網址:http://www.5015168.live/rumen/r308.shtml

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2018-08-14 17:37 原創:DIVCSS5
本文www.5015168.live DIVCSS5版權所有。

民生银行股票行情