整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          「測試開發全棧-HTML」(8)css字體屬性之字體大小

          天講了怎么使用css中font-family來設置字體,如微軟雅黑、宋體、Arial等。繼續講下使用font-size屬性來定義字體大小。

          語法如下:

          p {

          font-size:20px;

          }

          px(像素)大小是我們網頁的最常用的單位。谷歌瀏覽器默認的字體大小為16px 不同瀏覽器可能默認顯示的字體字號大小不一致,盡量給一個明確值大小,不要默認大小??梢越o<body>指定整個頁面文字的大小。


          來看下效果:

          對應的代碼為:

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta http-equiv="X-UA-Compatible" content="IE=edge">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>CSS字體屬性之字體系列</title>

          <!--對h2修改下字體-->

          <style>

          body {

          font-size: 16px;

          }

          </style>


          </head>

          <body>

          <h2>明月幾時有</h2>

          <p>明月幾時有,把酒問青天</p>

          <p>不知天上宮闕,今夕是何年</p>

          <p>我欲乘風歸去,又恐瓊樓玉宇</p>

          <p>高處不勝寒,起舞弄清影,何似在人間。</p>

          </body>

          </html>

          有沒有發現除了標題標簽,其余的字的字體都是16px了?那么這里需要注意一點: 標題標簽比較特殊,需要單獨指定文字大小。

          如下的效果:

          可以看到標題字體變小了,具體的代碼為:

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta http-equiv="X-UA-Compatible" content="IE=edge">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>CSS字體屬性之字體系列</title>

          <!--對h2修改下字體-->

          <style>

          body {

          font-size: 16px;

          }


          h2 {

          font-size: 16px;

          }

          </style>


          </head>

          <body>

          <h2>明月幾時有</h2>

          <p>明月幾時有,把酒問青天</p>

          <p>不知天上宮闕,今夕是何年</p>

          <p>我欲乘風歸去,又恐瓊樓玉宇</p>

          <p>高處不勝寒,起舞弄清影,何似在人間。</p>

          </body>

          </html>

          可以看到對h2單獨進行了字體設置

          h2 {

          font-size: 16px;

          }


          注意點:

          不要忘記加上px

          標題有特殊性,需要單獨設置文字大小。


          好的,今天就到這里了。晚安~

          頁中添加滾動字幕效果

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>滾動字體的設置</title>

          </head>

          <body>

          <canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"></canvas>

          <script type="text/javascript">

          var canvas1 = document.querySelector("#canvas1") // 1.找到畫布對象

          var ctx = canvas1.getContext("2d") // 2.上下文對象(畫筆)


          ctx.shadowBlur = 10; // 陰影距離

          ctx.shadowColor = "red" // 陰影顏色

          ctx.shadowOffsetX = 30 // 陰影偏移

          ctx.shadowOffsetY = 30 // 陰影偏移


          ctx.font = "150px 楷體"


          ctx.fillText("你好!", 20,150)


          ctx.fillText("你好!", 20,350)


          ctx.strokeText('你好!',23, 153)


          ctx.strokeText('你好',23, 553)


          canvas繪制文字



          var x = 600

          setInterval(function(){

          if(x > -350){

          //清空畫布

          ctx.clearRect(0,0,600,600)

          ctx.strokeText('你好!',x, 153)

          ctx.fillText("你好!", x,350)


          ctx.font = "50px 宋體"

          ctx.strokeText('每天學習一點點',x, 553)


          x -= 3

          }else{x=590}



          }, 16)


          </script>


          </body>

          </html>

          作者 | 張旭乾

          主站蜘蛛池模板: 精品欧洲AV无码一区二区男男| 亚洲色精品vr一区二区三区| 国产午夜精品一区二区三区小说 | 中文字幕AV一区二区三区人妻少妇| 国产欧美色一区二区三区| 美女AV一区二区三区| 国产一区二区三精品久久久无广告 | 日韩一区二区三区在线精品| 亚洲图片一区二区| 一区二区三区免费视频播放器| 亚洲国产精品一区二区第一页免 | 亚洲视频一区二区在线观看| 亚洲无人区一区二区三区| 一区二区三区精品高清视频免费在线播放| 亚洲综合av一区二区三区 | 亚洲AV综合色区无码一区爱AV | 久久久久人妻一区二区三区vr| 成人免费av一区二区三区| 久久久久女教师免费一区| 无码人妻久久一区二区三区蜜桃| 精品国产免费一区二区| 国产精品综合一区二区三区| 日本精品啪啪一区二区三区| 国产精品熟女视频一区二区 | 成人国内精品久久久久一区| 乱人伦一区二区三区| 精品一区二区三区免费视频| 手机看片一区二区| 一区二区三区四区精品视频| 人妻无码一区二区不卡无码av | 国产一区二区视频在线观看| 一区二区三区人妻无码| 末成年女A∨片一区二区| 中文字幕乱码一区久久麻豆樱花 | 日本精品一区二区久久久| 久久久久国产一区二区三区| 国产激情无码一区二区| 蜜臀AV免费一区二区三区| 亚洲AV无码一区二区三区牲色| 加勒比精品久久一区二区三区| 一区二区日韩国产精品|