，可以是相对路径也可以是绝路径 format：自定义字体的格式，主要用来帮助浏览器识别 weight：定义字体是否为粗体 style：定义字体样式，如斜体 */ 兼容性：IE9+、FireFox3.5+...） 兼容性：IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile Safari4.2+ OpenType (.otf)（被认为是一种原始的字体格式...，内置在TureType的基础上，所以也提供了更多的功能） 兼容性：FireFox3.5+、Chrome4+、Safari3.1+、Opera10+、IOS Mobile Safari4.2+...SVG (.svg)（基于SVG字体渲染的一种格式） 兼容性：Chrome4+、Safari3.1+、Opera10+、IOS Mobile Safari3.2+ 3、CSS3 @font-face..., Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ } 字体文件
, Android, iOS */ url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS...浏览器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+ OpenType格式(.otf) 以TrueType... 浏览器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+ Web Open Font格式(.woff..., Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS...使用绝对路径可解决问题； b). 在file uri scheme的情况下（file:///），由于FireFox默认的file uri origin策略十分严格，不同路径等级则无法访问。
低质量的位图在高清设备上放大后会有难看的锯齿，无法满足响应式页面的开发需求 在线字体带来的革命： 在线字体本质就是文字，但是也可是像图形的文字。...Safari3+,Opera10+,iOS Mobile Safari4.2+】； OpenType(.otf)格式： .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能...,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】； Web Open Font Format...【IE4+】； SVG(.svg)格式： .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2..., Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS
所以，为了保证可以在每一台机器上都能显示，把一款字体嵌进网页是一个不错的选择。当然仅限于西方字体，如果是汉语的话，字体会很庞大，每次加载字体就会浪费用户很长的时间和很多的流量。...+,Opera10+,iOS Mobile Safari4.2+ OpenType(.otf)格式： .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能...,支持这种字体的浏览器有Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+ Web Open Font Format...IE4+ SVG(.svg)格式： .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2...src：设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。
低质量的位图在高清设备上放大后会有难看的锯齿，无法满足响应式页面的开发需求 在线字体带来的革命： 在线字体本质就是文字，但是也可是像图形的文字。...+,Opera10+,iOS Mobile Safari4.2+】； OpenType(.otf)格式： .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能...,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】； Web Open Font Format...【IE4+】； SVG(.svg)格式： .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2..., Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS
TureTpe(.ttf)格式 支持浏览器：IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+ OpenType(.otf...) 格式 支持浏览器：Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+ Web Open Font Format(....woff) 格式 支持浏览器：IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+ Embedded Open Type(.eot)格式 支持浏览器：....eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】 SVG(.svg) 格式 Chrome4+,Safari3.1+,Opera10.0+,iOS...会在刚刚下载的文件中的css 文件中有，可以直接使用，不用在定义 使用字体 直接 style="font-family:FamilyName" 或直接class 内定义使用到指定元素上。
5.canvasjs url：http://canvasjs.com browser：官方未说明 resume：一个使用HTML5、JavaScript创建图表在画布上，图表包括几个好看的主题和10倍的速度比传统的基于...、firefox、opear resume：chartkick是一个依赖于ruby的绘制图表的js库，在Python中也可以使用 ?...RGraph创建这些图表在web浏览器使用JavaScript,这意味着更快的页面和web服务器负载,导致较小的页面大小和更快的网站。 ?...它完全实现在JavaScript中,不依赖于任何其他库,并使用SVG VML或画布上 ?...2+, Safari 3+, Opera 9, Chrome and Internet Explorer 6+，ios和andriod设备 resume：使用内嵌在HTML中的数据或通过javascript
+、iOS Mobile、Safari4.2+； OpenType(.otf)格式 .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+...SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+ 3、使用步骤 需要注意的是，我们在使用 Web.../fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url(.../fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */ } 最后在使用的时候：font-family: "shuangyuan"; 就可以使用.../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问...+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】； 二、OpenType(.otf)格式： .otf字体被认为是一种原始的字体格式，其内置在TureType...的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】； 三、Web...Font Format(.woff)格式： .woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5...【IE4+】； 五、SVG(.svg)格式： .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2
） svg动画开始时触发（Chrome、Firefox、Safari） <animate...、Safari) test 触发拖动已在元素上完成（Chrome、Firefox、IE、Safari) test 按下鼠标时触发（Chrome、Firefox、IE、Safari) test 当鼠标悬停在元素上时触发...> 当鼠标移离元素时触发（Chrome、Firefox、IE、Safari) test 需要将鼠标悬停在元素上（Chrome、Firefox、IE...+X on Windows) (CTRL+ALT+X on OS X) 链接元素：访问键属性可以在通常无法利用的元素上启用XSS <link rel="canonical" accesskey="X"
} /** * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. */ [hidden] { display:...Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family...none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=...Correct the inability to style clickable types in iOS and Safari. * 2..../reset/index'; // 全局变量的配置 $color: red; 这里就直接报错了 可是我们在 main.ts 中进行导入了呀，为毛就不行呢？
注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式 使用步骤如下： 第一步：拷贝项目下面生成的font-face（注意路径）.../* 声明字体 */ @font-face { /* 引用字体文件（注意路径）format告诉浏览器这些字体文件以什么格式解析 */ font-family: 'iconfont'; src:...*/ url('iconfont.ttf') format('truetype'),/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/...url('iconfont.svg#iconfont') format('svg');/* iOS 4.1- */ } 第二步：定义使用iconfont的样式 .iconfont{ font-family...不过因为本质上还是使用的字体，所以多色图标还是不支持的。
2、Safari 的一小步，浏览器的一大步 大约十年后，在2008年，Safari 3.1 重新支持了 @font-face , 并且可以使用最普遍的字体格式 ttf 以及 otf。...一年后，Firefox Opera Chrome 等主流浏览器都开始支持 @font-face。...在移动端，iOS 从4.2开始也支持这些字体格式。 自此，@font-face 死而复生。 web字体时代来临。...先说 svg 格式，iOS 在 4.2 之前仅支持 svg 格式的字体，由于 svg 格式不能压缩，通常会比较大。鉴于 iOS 老版本渐渐被淘汰，因此可以考虑去掉此格式。...最早在 firefox 3.6 上实现。事实上，woff 并不是一种新的字体格式，它只是包装 truetype 和 opentype 并进行压缩，压缩后可以使 truetype 减少 40% 。
概述 在阿里图标库中下载图标到本地后，目录结构如下： 图标库下载到本地目录结构 第一次看到这几个文件时，不知道有什么用，可能会直接删除，但万万不可，打开 iconfont.css 文件可以在 @font-face...【支持的浏览器：IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】 SVG / SVGZ Scalable Vector Graphics (Font)....SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用。...【支持的浏览器：Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】 EOT Embedded Open Type。这是微软创造的字体格式。...【支持的浏览器：IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】 3.
t=1495209181038') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 6 url...*/ url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/...url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family:"iconfont".../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('...../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } 第五步： 把下载好的文件导入我们的工程里，如图 ? ?
矢量图，两个方案，svg和iconfont。svg雪碧图只兼容IE9+，而平台仍需要支持IE8的用户，为了避免矢量图和位图两套方案，选择了兼容性更好的iconfont，可以完美兼容到IE6。...在选择绘制图标大小上有了几次尝试，因为图标大多数是12px/16px/24px/32px/48px，最后我们经过多次测试确认绘制的svg大小为480px，左右留白30px这个标准 字体跨域问题 这个是遇到的最简单的一个问题...*/ url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/...url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } 但是经过实测，IE9已支持.woff，iOS4.1-几乎没有用户，因此优化为：...-7drjga') format('truetype');/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ ｝ 同时要注意书写顺序，如果.ttf在.
mousePos.y; } document.onmousemove = mouseMove; 2、jQuery实现 $('#ele').click(function(event){ //获取鼠标在图片上的坐标...function isSupportSVG() { var SVG_NS = 'http://www.w3.org/2000/svg'; return !!...document.createElementNS(SVG_NS, 'svg').createSVGRect; } console.log(isSupportSVG()); 十二、检测浏览器是否支持...') > -1 //Safari }; } } if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android...("Safari")>0) { return "Safari"; //Safan浏览器 } if(isCamino=navigator.userAgent.indexOf
SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 PS：SVG 在IE9以及Firefox和chrome下都支持...它在绘制即时模式图形（包括矩形、路径和图像）方面公开更具编程性的体验，与 SVG 类似。即时模式图形呈现是一个“触发即忘”模型，该模型将图形直接呈现到屏幕上，但随后对所完成的操作不保留任何上下文。...在测试 Canvas 渲染的时候图片边缘基本上都出现了明显的锯齿。...下图显示了 SVG 对象和 Canvas 对象之间在呈现时间上的差异。 一般情况下，随着屏幕大小的增大，画布将开始降级，因为需要绘制更多的像素。...在浏览器性能（载入速度）上比 SVG 更佳。
在样式里面声明字体： 告诉别人我们自己定义的字体(一定注意字体文件路径的问题) @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot...+、iOS Mobile、Safari4.2+； OpenType(.otf)格式 .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+...、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+； Web Open Font Format(.woff)格式 woff字体是Web字体中最佳格式...，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1...SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+； 了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
