BeWithYou

胡搞的技术博客

  1. 首页
  2. web前端/Javascript
  3. html中引入第三方字体

html中引入第三方字体


html中如何引入第三方字体

在一些特定场景,比如html5游戏开发过程中,可能需要展示特殊的字体。尤其是像素画的游戏中,如果字体选用平滑的系统字体,则会看上去不伦不类。

我们可以使用CSS3中的@font-face特性引入第三方字体。

@font-face {
    font-family: 'GraphicPixel';
    src: url('/demo/flappy/fonts/graphicpixel-webfont.eot');
    src: url('/demo/flappy/fonts/graphicpixel-webfont.eot?#iefix') format('embedded-opentype'),
    url('/demo/flappy/fonts/graphicpixel-webfont.woff') format('woff'),
    url('/demo/flappy/fonts/graphicpixel-webfont.ttf') format('truetype'),
    url('/demo/flappy/fonts/graphicpixel-webfont.svg#GraphicPixelRegular') format('svg');
   font-weight: normal;
   font-style: normal;
}

上面这种写法兼容了各种浏览器,需要准备eot,woff,ttf,svg这几种格式的字体文件。上面的写法中每种src分别支持的浏览器和文件格式就不做赘述了。

下面这段文字使用GraphicPixel,实现像素化字体。

1234567890 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

回到顶部