@font-face
这个属性呢,必须设置在 css的根下,也就是说,不能设置在任何元素里面。
@font-face:
参数:
font-family: 给这个文字库 起个名字。
src: url() format()
浏览器呢,是不具备解析 这种格式的文件的, 所以要调用 自身的系统来帮忙解析。 format 这个属性,就是方便 系统来识别这个文件的格式的。
例如 我们平常见的。 txt 文件, 那么系统打开这个文件, 是不是也要调用 记事本来打开它。
*{ padding: 0; margin: 0; } @font-face{ font-family: "name"; /*给这个文字库 取个名字*/ src: url(‘填需要加载的文字库‘) format(‘填说明文字库的 格式‘) } /* 一般来说,你引入的文字库,要兼容以下的 各种格式。 需要使用的话,直接copy 下面的代码, 把url 改了即可,*/ /* 各种格式,在各种浏览器里 兼容情况不一样。 */ /* url放入(文字库的链接) ,format 是说明这个格式的,方便浏览器调用系统解析 */ @font-face { font-family: ‘diyfont‘; src: url(‘diyfont.eot‘); /* IE9+ */ src: url(‘diyfont.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */ url(‘diyfont.woff‘) format(‘woff‘), /* chrome、firefox */ url(‘diyfont.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url(‘diyfont.svg#fontname‘) format(‘svg‘); /* iOS 4.1- */ } body{ font-family: ‘name‘ /* 直接引用 你设置的名字 */ }
原文:https://www.cnblogs.com/yanggeng/p/11200364.html