CSS自定义字体，在线字体格式转换

在线字体格式转换地址：https://www.fontke.com/tool/convfont/

@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

@font-face是CSS3中的一个模块，主要是把自己定义的Web字体嵌入到你的网页中。

@font-face的语法规则：

@font-face {font-family: <YourWebFontName>;src: <source> [<format>][,<source> [<format>]]*;[font-weight: <weight>];[font-style: <style>];}

取值说明

YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体（下载回来的叫什么字体，这里就填什么字体名），他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,svg等；
weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体

兼容浏览器：

一、TureTpe(.ttf)格式：

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,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(.woff)格式：

.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

四、Embedded Open Type(.eot)格式：

.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；

五、SVG(.svg)格式：

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

CSS自定义字体，在线字体格式转换相关推荐

网页在线图片格式转换源码
网页在线图片格式转换源码. 免费在线图片格式转化器,可将jpeg.jpg.png.gif. webp.svg.ico.bmp文件转化为jpeg.png.webp.webp动画.gif文件. 无需上传文 ...
在线图片格式转换地址
在线图片格式转换地址 https://onlineconvertfree.com/zh/convert-format/jpeg-to-svg/
在线图片格式转换，svg转png，jpg转ico
jpg格式图片转png图片,png图片转jpg图片,免费在线转换方法:https://tupiangeshi.com/ 1.点击上传图片 2.选择转svg图片,稍等片刻 3.最后点击下载转换后的SV ...
2021-10-20 推荐一个在线视频格式转换的好网站https://www.zamzar.com/，我测试过mp4转到gif
一.无需麻烦注册,直接在线转换,我测试过mp4转到gif. 二,网站地址: Zamzar - video converter, audio converter, image converter, e ...
《免费的在线图片格式转换工具》
官方网址:https://jinaconvert.com/cn/index.php 操作方法 1.选择要转换的格式,有非常多的格式可选 2.上传本地图片,然后等待,转换完成之后,将转换好的图片下载到本 ...
CSS在线字体库，外部字体的引用方法@font-face
[新增]使用自己下载的字体的示例: 参考 http://www.w3cplus.com/content/css3-font-face @font-face{ font-family: &quo ...
css字压,CSS自定义字体的实现，前端实现字体压缩
CSS 自定义字体移动端如何兼容UI给的字体 [toc] 移动端的默认字体 IOS 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue And ...
10款优秀的在线格式转换工具
1.online-convert online-convert是一个十分优秀的在线格式转换应用,支持格式覆盖文档.图片.音频.视频.电子书.Flash以及一些不常见的格式.使用非常简单,你只需根据在 ...
各种快捷的格式转换：图片转.ico，去图片白底
全部亲测是可以免费使用的,不用扫什么二维码,注册啥的在线将各种格式的图片转换成.ico格式 http://www.faviconico.org/ 在线去图片的白色背景 http://www.aige ...
手把手教你两招，轻松完成图片格式转换
我们平时在工作生活中肯定会使用到图片,图片有不同的格式,像我们平时常用的图片格式有JPG.PNG.GIF等格式,不同格式的图片有不同的优缺点,并且有时候在提交照片的时候会用到不同的格式的照片,这时候就 ...

CSS自定义字体，在线字体格式转换

CSS自定义字体，在线字体格式转换相关推荐

最新文章

热门文章