CSS3字體效果的設置方法

2016/8/4 9:04:08 閱讀：1544 發布者：1544

1. 文本陰影 text-shadow
其實與陰影一樣
text-shadow: X軸偏移量 Y軸偏移量模糊半徑陰影顏色
注意: 1.color可以使用rgba色. 2.沒有inset值

CSS Code

<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, 用(...)省略標記.

CSS Code

text-overflow:clip; /*表示剪切*/
text-overflow:ellipsis; /*表示顯示省略標記*/
<style type="text/css">
.test_demo{
text-overflow:ellipsis;
overflow:hidden;
whitewhite-space:nowrap; /*強制文本在一行內顯示*/
width:200px;
background:#ccc;
}
</style>
<div class="test_demo">
超酷的IT技術學習平臺（我是省略號）
</div>

3. 嵌入字體 @font-face
這個重點講一下。
@font-face是CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網頁中，隨著@font-face模塊的出現，我們在Web的開發中使用字體不怕只能使用Web安全字體，你們當中或許有許多人會不自然的問，這樣的東西IE能支持嗎？當我告訴大家@font-face這個功能早在IE4就支持了你肯定會感到驚訝。我的Blog就使用了許多這樣的自定義Web字體，比如說首頁的Logo，Tags以及頁面中的手寫英文體，很多朋友問我如何使用，能讓自己的頁面也支持這樣的自定義字體，一句話這些都是@font-face實現的，為了能讓更多的朋友知道如何使用他，今天我主要把自己的一點學習過程貼上來和大家分享。
首先我們一起來看看@font-face的語法規則：

CSS Code

@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：

CSS Code

<style type="text/css">
@font-face {
font-family: "MOOC Font";
src: url("http://www.sinic.com.cn/");
}
.demo {
width: 340px;
padding: 30px;
color: #566F89;
background: #000;
font-size:58px;
font-family: "monaco";
}
</style>
<div class="demo">IMOOC</div>

上一篇 CSS的border邊框屬性及其在CSS3中的新特性

下一篇制作網頁的時候如何使用:before和:after

CSS3字體效果的設置方法

文章分類

相關新聞

熱門標簽