整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頁中添加滾動字幕效果
<!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>
前，瀏覽器只能展示本地安裝的字體。如果字體未安裝，網頁顯示效果會大打折扣。
為了解決這個問題，CSS 引入 web 字體，允許瀏覽器從服務器下載字體，下載完成后再重新渲染字體。
使用 web 字體前，需要了解常用的字體文件格式。
TTF 字體文件，即 TrueType 字體，是由蘋果和微軟在 20 世紀 80 年代末開發的字體標準。它是 macOS 和 Windows 操作系統使用最廣泛的字體格式。
OTF 字體文件，即 OpenType 字體，是一種可縮放的計算機字體格式。它建立在 TrueType 基礎上，是微軟的注冊商標。OpenType 字體目前在主要的計算機平臺上廣泛使用。
WOFF 字體文件，即 The Web Open Font Format 字體，是一種用于網頁的字體格式，2009 年開發，如今是 W3C（萬維網聯盟）的推薦標準。WOFF 本質是 OpenType 或 TrueType 字體，但是經過壓縮并附加額外的元數據。在帶寬受限的網絡中，WOFF 能更好的支持從服務器到客戶端的字體傳輸。
WOFF 2.0 字體文件，相比于 WOFF，提供了更高的壓縮效率。
SVG 字體，將 SVG 用作顯示文本時的字形。SVG 1.1 規范定義了一個字體規范，允許在 SVG 文檔中創建字體。
EOT 字體文件，即 Embedded OpenType Fonts 文件，是微軟設計的一種用于網頁的嵌入式字體，它是 OpenType 字體的緊湊形式。
不同字體格式的瀏覽器兼容性下圖所示：
不同字體格式的瀏覽器兼容性，截圖數據來自 w3schools.com
使用 @font-face CSS 指令定義自定義字體。使用前需要把字體文件放在服務器目錄，然后定義新的字體名稱，并指向字體所在位置。
以京華老宋體為例，這是一款可以免費商用的中文字體。下載字體文件后，放到和 index.html 同級的目錄，重命名為 jh-song.ttf。
下載字體文件
在 @font-face 指令內，使用 font-family 定義字體名稱，src 屬性定義字體文件路徑。
定義 web 字體
然后，像使用普通字體一樣，使用自定義字體樣式：
使用 web 字體
完
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
一、學習html學的是什么？
1.1學標簽
我要什么內容，就用什么標簽 在去思考使用標簽的什么屬性
比方說：文字就用文字標簽，HelloWorld 6號字 顏色變成紅色
<html>
<head>
<title></title>
</head>
<body>
<font size="6" color="red" >HelloWorld </font> //這個就是文字標簽 屬性尺寸是6，顏色是紅色
</body>
</html> 二、編寫格式
1、每個網頁頁面都是一個單獨的文件，頁面的后綴是XXXX.html 或者 XXXX.htm
2、編譯器/解釋器就是瀏覽器，瀏覽器會一行行編譯，不會像C 或者PLC等還需要再次編譯。
3、用記事本做演示，需要把后綴名改成.html ,如果后綴名被隱藏了，需要在文件菜單-查看-選項-查看-把隱藏已知文件類型的拓展名去掉
<html> //html開始
<head> //頭標簽開始
<title></title>
</head> //頭標簽結束
<body> //身體標簽開始
HelloWorld //主體內容
</body> //身體標簽結束
</html> //html結束三、常用標簽及其屬性：
3.1 文本修飾
font 行內標簽 （沒有換行效果）
size 字體的大小，最大值是7
color 顏色值
顏色的第一種表示形式：顏色單詞 red green blue
顏色的第二種表示形式： 顏色的RGB 如：rgb(0,0,255) 第一個0表示R紅色的份數，第二個表示G綠色的份數 ，第三個0表示B藍色的份數
顏色的第三種表示形式：十六進制表示，把顏色這個寫成#0000ff ,就是第一個紅綠藍十六進制，
face 字體族 黑體 楷體 宋體 華文彩云等 但必須是瀏覽器支持的字體
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
