字体在Chrome中无法正常工作

Question

我正在使用此css，但它无法正常工作。

@font-face { 
font-family: OpenSans-Bold; 
src: url('../design_images/font/OpenSans-Bold.eot'); /* EOT file for IE */ 
font-weight:normal; 
font-style:normal; 

} 
@font-face { 
font-family: OpenSans-Regular; 
src:url('font/OpenSans-Regular.eot'); 
font-weight:normal; 
font-style:normal; 

} 

@font-face { 
font-family: Oswald-Regular; 
src: url('font/Oswald-Regular.eot'); 
font-weight:normal; 
font-style:normal; 

} 
@font-face { 
font-family:OpenSans-Regular; 
src: url('font/OpenSans-Regular.ttf'); /* TTF file for CSS3 browsers */ 
font-weight:normal; 
font-style:normal; 
} 
@font-face { 
font-family:OpenSans-Bold; 
src: url('font/OpenSans-Bold.ttf'); 
font-weight:normal; 
font-style:normal; 
} 
@font-face { 
font-family: Oswald-Regular; 
src: url('font/Oswald-Regular.otf'); 
} 

.newr { 
     font-family:Oswald-Regular; 
     font-size:20px; 
     font-style:normal; 
     font-smooth:Crisp; 
     font-weight:normal; 
     color:#f9e211; 
     text-transform:uppercase; 
     margin:21px 0 0 25px; 
    } 

Answer 1

看起来你在src属性中有两个不同的路径。一个是

src：url（'../ design_images/font/OpenSans-Bold.eot'）;/*用于IE */

EOT文件和其它的是

SRC：URL（ '字体/ OpenSans-Regular.eot'）;

为什么一条路径连接到../design_images/font/，另一条路径连接到font/？这可能是你的问题，取决于你的目录结构。只是想我会指出。

Answer 2

使用这样的：

@font-face{ 
    font-family: fontFamilyNameHere ; 
    src: url(.eot file path here); /* For IE */ 
    src: local("fontNameHere"), url(.ttf file path here) format("truetype"); /* non-IE */ 
    font-weight:normal; 
    font-style:normal; 
} 

Answer 3

有时候，我转换常规字体网络字体，使它们看起来更光滑和清洁，并在我的CSS它们加入到这样的事情：

@font-face { 
    font-family: 'ArvoRegular'; 
    src: url('Arvo-Regular-webfont.eot'); 
    src: url('Arvo-Regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('Arvo-Regular-webfont.woff') format('woff'), 
     url('Arvo-Regular-webfont.ttf') format('truetype'), 
     url('Arvo-Regular-webfont.svg#ArvoRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

搜索@ font-face生成器以生成所需的字体。