如何利用@font-face完成个性化字体

来源:互联网 发布:mac dobonnet口红试色 编辑:程序博客网 时间:2024/05/16 01:07

  1、使用CSS的@font-face首先需要获取要使用的字体的三种文件格式,确保能在主流浏览器中正常显示该字体。

  .ttf或.otf(适用于 Firefox3.5、Safari、Opera)

  .eot(适用于IE4+)

  .svg(适用于Chrome、Iphone)

  声明一个名为missYuan的字体.

  在网上下载好字体后,通常是otf格式,然后通过字体转换网站进行格式转换

  2、在样式表中声明该字体。

  @font-face {

  font-family: ‘rtws_yuegothic_triallight’;

  src: url(‘missyuan-webfont.eot’);

  src: url(‘missyuan-webfont.eot?#iefix’) format(‘embedded-opentype’),

  url(‘missyuan-webfont.woff2’) format(‘woff2’),

  url(‘missyuan-webfont.woff’) format(‘woff’),

  url(‘missyuan-webfont.ttf’) format(‘truetype’),

  url(‘missyuan-webfont.svg#rtws_yuegothic_triallight’) format(‘svg’);

  font-weight: normal;

  font-style: normal;

  }

  3、在需要的地方使用该字体

  如p{font-size:24px;font-weight:bold;}

0 0
原创粉丝点击