欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

W3CPlus   發(fā)布時(shí)間：2016-06-13 11:46:52   作者：大漠   我要評(píng)論
這篇文章主要介紹了CSS3字體效果的設(shè)置方法小結(jié),包括陰影效果、省略號(hào)代替以及嵌入字體,需要的朋友可以參考下

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2. .demo {   
  3.     width: 340px;   
  4.     padding: 30px;   
  5.     font: bold 55px/100% "微軟雅黑";   
  6.     color: #566F89;   
  7.     background: #000;   
  8.     text-shadow: 2px 2px 0 #E4F1FF;   
  9. }   
  10. </style>   
  11.   
  12. <div class="demo">IMOOC</div>  

2. 溢出文本 text-overflow, 用(...)省略標(biāo)記.

CSS Code復(fù)制內(nèi)容到剪貼板
  1. text-overflow:clip;        /*表示剪切*/  
  2. text-overflow:ellipsis; /*表示顯示省略標(biāo)記*/  
  3. <style type="text/css">   
  4. .test_demo{   
  5.     text-overflow:ellipsis;   
  6.     overflow:hidden;   
  7.     whitewhite-space:nowrap;       /*強(qiáng)制文本在一行內(nèi)顯示*/  
  8.     width:200px;   
  9.     background:#ccc;   
  10. }   
  11. </style>   
  12.   
  13. <div class="test_demo">   
  14.   超酷的IT技術(shù)學(xué)習(xí)平臺(tái)（我是省略號(hào)）   
  15. </div>  

3. 嵌入字體 @font-face
這個(gè)重點(diǎn)講一下。
@font-face是CSS3中的一個(gè)模塊，他主要是把自己定義的Web字體嵌入到你的網(wǎng)頁(yè)中，隨著@font-face模塊的出現(xiàn)，我們?cè)赪eb的開發(fā)中使用字體不怕只能使用Web安全字體，你們當(dāng)中或許有許多人會(huì)不自然的問(wèn)，這樣的東西IE能支持嗎？當(dāng)我告訴大家@font-face這個(gè)功能早在IE4就支持了你肯定會(huì)感到驚訝。我的Blog就使用了許多這樣的自定義Web字體，比如說(shuō)首頁(yè)的Logo，Tags以及頁(yè)面中的手寫英文體，很多朋友問(wèn)我如何使用，能讓自己的頁(yè)面也支持這樣的自定義字體，一句話這些都是@font-face實(shí)現(xiàn)的，為了能讓更多的朋友知道如何使用他，今天我主要把自己的一點(diǎn)學(xué)習(xí)過(guò)程貼上來(lái)和大家分享。
首先我們一起來(lái)看看@font-face的語(yǔ)法規(guī)則：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @font-face {   
  2.    font-family: <YourWebFontName>;   
  3.    src: <source> [<format>][,<source> [<format>]]*;   
  4.    [font-weight: <weight>];   
  5.    [font-style: <style>];   
  6.  }  

取值說(shuō)明
1、YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認(rèn)字體，他將被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
2、source:此值指的是你自定義的字體的存放路徑，可以是相對(duì)路徑也可以是絕路徑；
3、format：此值指的是你自定義的字體的格式，主要用來(lái)幫助瀏覽器識(shí)別，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
4、weight和style:這兩個(gè)值大家一定很熟悉，weight定義字體是否為粗體，style主要定義字體樣式，如斜體。
eg：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2. @font-face {   
  3.     font-family: "MOOC Font";   
  4.     src: url("http://www.dbjr.com.cn");   
  5. }   
  6. .demo {   
  7.     width: 340px;   
  8.     padding: 30px;   
  9.     color: #566F89;   
  10.     background: #000;   
  11.     font-size:58px;   
  12.     font-family: "monaco";   
  13. }   
  14. </style>   
  15.   
  16. <div class="demo">IMOOC</div>  

相關(guān)文章

  • 詳解CSS3中字體平滑處理和抗鋸齒渲染

    本篇文章主要介紹了CSS3中字體平滑處理和抗鋸齒渲染，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
    2017-03-29

  • 輕松掌握CSS3中的字體大小單位rem的使用方法

    rem是css3新定義的設(shè)置字體大小屬性,rem大小都是以html的字體大小設(shè)置為參考值進(jìn)行一個(gè)字體大小縮放,下面就帶大家來(lái)輕松掌握CSS3中的字體大小單位rem的使用方法:
    2016-05-24

  • 使用CSS3的font-face字體嵌入樣式的方法講解

    CSS3中的font-face可以將我們上傳的自定義的字體顯示出來(lái),有時(shí)比如我們要顯示英文音標(biāo)的字體時(shí)便需要用到,本文就整理了一下使用CSS3的font-face字體嵌入樣式的方法講解,需
    2016-05-13

  • CSS3 text shadow字體陰影效果

    最近在整理學(xué)習(xí)CSS3的一些小知識(shí)，現(xiàn)在已經(jīng)整理了CSS3選擇器，CSS3圓角和CSS3元素陰影屬性的使用方法了。今天為大家整理一下CSS3中的字體陰影——text-shadow的使用方法。
    2016-01-08

  • 一款純css3實(shí)現(xiàn)的顏色漸變按鈕的代碼教程

    今天給大家分享一款純css3實(shí)現(xiàn)的顏色漸變按鈕，這款按鈕的邊框和文字的顏色通過(guò)css3實(shí)現(xiàn)兩種顏色的漸變，清新淡雅，效果非常好看，需要的朋友可以參考下
    2014-11-12

  • css3 自定義字體font-face使用介紹

    這篇文章主要介紹了css3 自定義字體font-face使用，需要的朋友可以參考下
    2014-05-14

  • CSS3用@font-face實(shí)現(xiàn)自定義英文字體

    傳說(shuō)中的CSS3基本上什么都可以，那么CSS3中可不可以自定義英文字體呢?答案是非?？梢?。用@font-face即可實(shí)現(xiàn)自定義英文字體，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以了解下
    2013-09-23

  • CSS3+font字體文件實(shí)現(xiàn)圓形半透明菜單具體步驟(圖解)

    今天就從一個(gè)簡(jiǎn)單的圓形菜單的實(shí)現(xiàn)，使用CSS3+font字體文件實(shí)現(xiàn)圓形菜單，下面來(lái)總結(jié)一些最近學(xué)習(xí)的收獲，感興趣的朋友可以參考下哈
    2013-06-03

  • css3一款3D字體帶陰影效果的實(shí)現(xiàn)步驟

    3D字體而且還帶有陰影，這種效果想必大家只有認(rèn)為一些高級(jí)的作圖工具才可以實(shí)現(xiàn)的吧，css3的出現(xiàn)讓這一切看似不可能的實(shí)現(xiàn)成為可能，接下來(lái)為大家介紹下3D字體帶陰影效果的
    2013-03-20

  • CSS3教程(7):CSS3嵌入字體

    網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：想要制作一些很酷的頭部效果而且擺脫網(wǎng)站安全字體并且不使用圖片文件？那么就使用CSS3嵌入字體吧！ 想要制作一些很酷的頭部效果而
    2009-04-02

最新評(píng)論