Css3引用外部字體樣式---博客園老牛大講堂


css3可以實現什么?

  圓角,陰影,動畫...

 選擇器

  >:孩子選擇器:例子:div>b{color:red}(div下孩子b顏色為紅色)

  ~:兄弟 選擇器:例子:div~b{color:red}(div下的兄弟為紅色)

例子一:

英文換行屬性:--博客園老牛大講堂

  word-break: break-all;//設置英文字體換行

效果圖:

 

代碼:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                width: 150px;
                height: 100px;
                border: 1px solid #FF0000;
                word-break: break-all;//設置英文字體換行
            }
        </style>
    </head>
    <body>
        <div class="div1">
            sadfasdfasdassssssssssssssssssss
        </div>
    </body>
</html>

 例子二:--博客園老牛大講堂

H5引用好看字體的方法,以及文字的陰影效果:(通常一些網站可以讓字體變的好看,他們是怎樣做到的呢?)

  1、首先百度:字體下載或者:訪問:http://font.chinaz.com/進行下載。解壓之后如圖所示

  

  2、把解壓后端Monster.ttf文件拷貝到自己工程下,其中工程名字Css3,引用方法如圖所示。

  

  代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    @font-face
    {
        font-family: myfont;//自己命名
        src: url("../font/Monster.ttf");
    }
    .div_1
    {
        margin-bottom: 20px;
        font-size: 2em;
        width: 500px;
        height: 20px;
        font-family: myfont;
        text-shadow: 2px 2px 5px red;//給文字加陰影效果,參數意思(x軸偏移量,y軸偏移量,陰影的長度,陰影的顏色)
    }

</style>
<body>
<div  class="div_1">CHINAZ</div>
<div>CHINAZ</div>
</body>
</html>

 

  

  

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM