@ font-face字体不工作 [英] @font-face fonts not working

问题描述

我试图从本地存储中获取字体。

  @ font-face {
字体-family：const; 
 src：url（const.ttf）; 
} 
 
 .fp_title1 {
 font-family：'const'，trebuchet ms; 
 font-size：350％; 
 font-weight：100; 
 -webkit-text-stroke：1px; 
} 
  

这不会工作。我尝试重命名文件，使用'font-family'有和没有引号...

我也试图链接字体与HTML

 < link href ='CSS / const.ttf'rel ='stylesheet'type ='text / css' 
  

它在同一个文件夹中，名称是正确的。

编辑：我的CSS文件已经链接，字体是.ttf

解决方案

代码中可能有2个错误：path和extention。并使用以下格式以及ttf：

  @ font-face {
 font-family：'const' ; 
 src：url（'const.eot'）; / * IE9兼容模式* / 
 src：url（'const.eot？#iefix'）format（'embedded-opentype'），/ * IE6-IE8 * / 
 url（'const.woff '）格式（'woff'），/ *现代浏览器* / 
 url（'const.ttf'）格式（'truetype'），/ * Safari，Android，iOS * / 
 url const.svg＃svgFontName'）format（'svg'）; / * Legacy iOS * / 
} 
  

网址有助于创建网络字体： p>

http://www.fontsquirrel.com/ tools / webfont-generator

http://www.font-face-generator.com/

I'm trying to get a font working from local storage.

@font-face {
    font-family: const;
    src: url(const.ttf);
}

.fp_title1 {
    font-family: 'const', trebuchet ms;
    font-size: 350%;
    font-weight: 100;
    -webkit-text-stroke: 1px;
}

This won't work. I've tried renaming the file, using the 'font-family' with and without quotes...

I've also tried to link the font with HTML

<link href='CSS/const.ttf' rel='stylesheet' type='text/css'>

It's in the same folder, the name is right. I don't get it.

EDIT: My CSS file is already linked, the font is .ttf

解决方案

You might have 2 mistakes in code: path and extention. And use the following formats as well as ttf:

@font-face {
  font-family: 'const';
  src: url('const.eot'); /* IE9 Compat Modes */
  src: url('const.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('const.woff') format('woff'), /* Modern Browsers */
       url('const.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('const.svg#svgFontName') format('svg'); /* Legacy iOS */
}

urls that helps to create web fonts:

http://www.fontsquirrel.com/tools/webfont-generator

http://www.font-face-generator.com/

这篇关于@ font-face字体不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！