@font-face是CSS3属性,用来指定字体样式的。指定字体名为xxx的字体,并指定在哪里可以找到它的url。实例如下: View Code @font-face用法的简要概述:先用@font-face指定好字体名和url,然后给html元素的font-size赋值为@font-face中指定好的字体名称,即可使用该字体。 二、什么是format属性?如何使用format属性? forma...
@font-face { font-family: 'Tagesschrift'; src: url('tagesschrift.eot'); /* IE 5-8 */ src: local('☺'), /* sneakily trick IE */ url('tagesschrift.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */ url('tagesschrift.ttf') format('truetype'), /* ...
因为我在font.styl中引入字体的资源是相对font.styl的路径引用的,但是font-face是相当于包含它的样式表的位置进行解析的。 我在HeadTopBar.vue文件中引用了font.styl,那么font-face的url的引用是相对于HeadTopBar.vue文件路径的, 所以我把HeadTopBar.vue文件中的HeadTopBar.vue资源路径改为相对于HeadTopBar.vue ...
一、 font-face基本用法 font-face的基本用法想必大家都是知道的,基本上就是类似这样: @font-face{font-family:Lato;src:url('font-lato/lato-regular-webfont.woff2')format('woff2'),url('font-lato/lato-regular-webfont.woff')format('woff'),url(font-lato/lato-regular-webfont.ttf)format("opentype...
@font-face { font-family: "subfont"; src: url("subfont.eot"); /* IE9/ src: url("subfont.eot") format("embedded-opentype"), /IE6-IE8/ url("subfont.woff2") format("woff2"), url("subfont.woff") format("woff"), /chrome、firefox/ ...
@font-face{font-family:'MyWebFont';src:url('myfont.woff')format('woff');/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */} 然后,像这样使用: body{font-family:'MyWebFont';} @font-face基本知识 在@font-face网络字体技术之前,浏览器显示网页上文字使用的字体只能限制在电脑里已经安装的几...
@font-face { font-family: 'Monoton'; font-style: normal; font-weight: 400; src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff'); ...
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。 为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face: @font-face{font-family:'YourWebFontName';src:url('Your...
@font-face { font-family: "fashion"; src: url("font/fashion.woff") format("woff"); font-style: normal; font-weight: normal; } 然后在需要设置个性化字体的元素中引用即可,例如引用到class选择器为logo的元素上: .logo{ font-family: "fashion"; } 到这里我们已经通过CSS3 @font-fa...
@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('truetyp...