Heim > Web-Frontend > HTML-Tutorial > @font-face(css3属性)实现在网页中嵌入任意字体_html/css_WEB-ITnose

@font-face(css3属性)实现在网页中嵌入任意字体_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:53:53
Original
1120 Leute haben es durchsucht

@font-face语法规则

@font-face {   font-family: <yourwebfontname>;   src: <source> [<format>][,<source> [<format>]]*;   [font-weight: <weight>];   [font-style: <style>]; }</style></weight></format></source></format></source></yourwebfontname>
Nach dem Login kopieren
说明:

  1. YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”

  2. source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;

format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。

实例:(以SingleMaltaRegular为例)

  1. 下载所需要的字体。

  2. 获得@font-face所需的.eot,.woff,.ttf,.svg字体格式字体。可以在这个网站上搞定。点击进入 (fontsquirrel)

  3. Font Squirrel下载文件到本地的电脑上了,解压。即可得到字体。

  4. 在项目中新建文件夹fonts,讲下载字体放进去。

样式书写格式:

@font-face {   font-family: 'SingleMaltaRegular';      src: url('../fonts/singlemalta-webfont.eot');     src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),         url('../fonts/singlemalta-webfont.woff') format('woff'),      url('../fonts/singlemalta-webfont.ttf') format('truetype'),       url('../fonts/singlemaltawebfont.svg#SingleMaltaRegular') format('svg');   font-weight: normal;   font-style: normal;}?
Nach dem Login kopieren


最后即可引用的字体:

body{  font-family: 'SingleMaltaRegular'}
Nach dem Login kopieren


注:通过网站下载的文件里,会自动生成样式,从而直接拷贝即可
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage