整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
页中添加滚动字幕效果
<!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小时内与您取得联系。
