整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前，浏览器只能展示本地安装的字体。如果字体未安装，网页显示效果会大打折扣。
为了解决这个问题，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 字体
完
前端开发过程中难免会用到特殊字体，如何引入特殊字体？
@font-face {
font-family: 'icomoon'; // 这里自定义字体名称
src: url('fonts/icomoon.eot?'); // 文件路径或者服务器路径
src: url('fonts/icomoon.eot?') format('embedded-opentype'), // format属性：字体的格式 主要用于浏览器识别
url('fonts/icomoon.ttf?') format('truetype'),
url('fonts/icomoon.woff?') format('woff'),
url('fonts/icomoon.svg?') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
/* 调用 */
body{
font-family:'icomoon'
}
注：eot为IE专用，ttf官方说是苹果和微软为PostScript 而开发的字体格式，个人理解为通用格式。woff是压缩过后轻量级，svg对文本支持不太好
页中添加滚动字幕效果
<!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>
*请认真填写需求信息，我们会在24小时内与您取得联系。
