CSS生成字体@font-face

最新推荐文章于 2025-10-14 06:23:54 发布

原创最新推荐文章于 2025-10-14 06:23:54 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

css+div 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何使用FontSquirrel的网页字体生成工具将本地字体文件转换为适合网页使用的格式，并通过CSS应用到网页设计中。

需要本地有字体文件，如：helvetica-light.otf

通过工具自动生成网页字体，如：http://www.fontsquirrel.com/tools/webfont-generator

点击UPLOAD后，再DOWNLOAD

会得到一个目录包，如：helvetica-light

然后CSS里定义，如：

@font-face {
    font-family: 'Helvetica-Light-Light-Italic';
    src: url('helvetica-light/helvetica-Light-webfont.eot');
    src: url('helvetica-light/helvetica-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('helvetica-light/helvetica-Light-webfont.woff') format('woff'),
         url('helvetica-light/helvetica-Light-webfont.ttf') format('truetype'),
         url('helvetica-light/helvetica-Light-webfont.svg#AlluraRegular') format('svg');
}

body{font-family: 'Helvetica-Light-Light-Italic' }