CSS3字體效果的設(shè)置方法小結(jié)

1. 文本陰影 text-shadow
其實與陰影一樣
text-shadow: X軸偏移量 Y軸偏移量 模糊半徑 陰影顏色
注意: 1.color可以使用rgba色. 2.沒有inset值
- <style type="text/css">
- .demo {
- width: 340px;
- padding: 30px;
- font: bold 55px/100% "微軟雅黑";
- color: #566F89;
- background: #000;
- text-shadow: 2px 2px 0 #E4F1FF;
- }
- </style>
- <div class="demo">IMOOC</div>
2. 溢出文本 text-overflow, 用(...)省略標記.
- text-overflow:clip; /*表示剪切*/
- text-overflow:ellipsis; /*表示顯示省略標記*/
- <style type="text/css">
- .test_demo{
- text-overflow:ellipsis;
- overflow:hidden;
- whitewhite-space:nowrap; /*強制文本在一行內(nèi)顯示*/
- width:200px;
- background:#ccc;
- }
- </style>
- <div class="test_demo">
- 超酷的IT技術(shù)學習平臺(我是省略號)
- </div>
3. 嵌入字體 @font-face
這個重點講一下。
@font-face是CSS3中的一個模塊,他主要是把自己定義的Web字體嵌入到你的網(wǎng)頁中,隨著@font-face模塊的出現(xiàn),我們在Web的開發(fā)中使用字體不怕只能使用Web安全字體,你們當中或許有許多人會不自然的問,這樣的東西IE能支持嗎?當我告訴大家@font-face這個功能早在IE4就支持了你肯定會感到驚訝。我的Blog就使用了許多這樣的自定義Web字體,比如說首頁的Logo,Tags以及頁面中的手寫英文體,很多朋友問我如何使用,能讓自己的頁面也支持這樣的自定義字體,一句話這些都是@font-face實現(xiàn)的,為了能讓更多的朋友知道如何使用他,今天我主要把自己的一點學習過程貼上來和大家分享。
首先我們一起來看看@font-face的語法規(guī)則:
- @font-face {
- font-family: <YourWebFontName>;
- src: <source> [<format>][,<source> [<format>]]*;
- [font-weight: <weight>];
- [font-style: <style>];
- }
取值說明
1、YourWebFontName:此值指的就是你自定義的字體名稱,最好是使用你下載的默認字體,他將被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
2、source:此值指的是你自定義的字體的存放路徑,可以是相對路徑也可以是絕路徑;
3、format:此值指的是你自定義的字體的格式,主要用來幫助瀏覽器識別,其值主要有以下幾種類型:truetype,opentype,truetype-aat,embedded-opentype,avg等;
4、weight和style:這兩個值大家一定很熟悉,weight定義字體是否為粗體,style主要定義字體樣式,如斜體。
eg:
- <style type="text/css">
- @font-face {
- font-family: "MOOC Font";
- src: url("http://www.dbjr.com.cn");
- }
- .demo {
- width: 340px;
- padding: 30px;
- color: #566F89;
- background: #000;
- font-size:58px;
- font-family: "monaco";
- }
- </style>
- <div class="demo">IMOOC</div>
相關(guān)文章
- 本篇文章主要介紹了CSS3中字體平滑處理和抗鋸齒渲染,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-03-29
- rem是css3新定義的設(shè)置字體大小屬性,rem大小都是以html的字體大小設(shè)置為參考值進行一個字體大小縮放,下面就帶大家來輕松掌握CSS3中的字體大小單位rem的使用方法:2016-05-24
- CSS3中的font-face可以將我們上傳的自定義的字體顯示出來,有時比如我們要顯示英文音標的字體時便需要用到,本文就整理了一下使用CSS3的font-face字體嵌入樣式的方法講解,需2016-05-13
- 最近在整理學習CSS3的一些小知識,現(xiàn)在已經(jīng)整理了CSS3選擇器,CSS3圓角和CSS3元素陰影屬性的使用方法了。今天為大家整理一下CSS3中的字體陰影——text-shadow的使用方法。2016-01-08
- 今天給大家分享一款純css3實現(xiàn)的顏色漸變按鈕,這款按鈕的邊框和文字的顏色通過css3實現(xiàn)兩種顏色的漸變,清新淡雅,效果非常好看,需要的朋友可以參考下2014-11-12
- 這篇文章主要介紹了css3 自定義字體font-face使用,需要的朋友可以參考下2014-05-14
CSS3用@font-face實現(xiàn)自定義英文字體
傳說中的CSS3基本上什么都可以,那么CSS3中可不可以自定義英文字體呢?答案是非常可以。用@font-face即可實現(xiàn)自定義英文字體,下面有個不錯的示例,感興趣的朋友可以了解下2013-09-23CSS3+font字體文件實現(xiàn)圓形半透明菜單具體步驟(圖解)
今天就從一個簡單的圓形菜單的實現(xiàn),使用CSS3+font字體文件實現(xiàn)圓形菜單,下面來總結(jié)一些最近學習的收獲,感興趣的朋友可以參考下哈2013-06-03- 3D字體而且還帶有陰影,這種效果想必大家只有認為一些高級的作圖工具才可以實現(xiàn)的吧,css3的出現(xiàn)讓這一切看似不可能的實現(xiàn)成為可能,接下來為大家介紹下3D字體帶陰影效果的2013-03-20
- 網(wǎng)頁制作Webjx文章簡介:想要制作一些很酷的頭部效果而且擺脫網(wǎng)站安全字體并且不使用圖片文件?那么就使用CSS3嵌入字體吧! 想要制作一些很酷的頭部效果而2009-04-02