@ font-face有时候有时会有效，而不是其他时间呢？

-2

我在我的css中遇到了@ font-face规则的问题。在一些样式表中，它完全适用于其他样式，它根本不起作用...@ font-face有时候有时会有效，而不是其他时间呢？

正如您在代码片段中看到的，我使用外部文件作为我的字体，但在此特殊情况下它不工作...

任何想法的人？

无尽的感激之情将是你的分享:)

@charset "utf-8" 
 

 
@font-face { 
 
    font-family: sinhala; 
 
    src: url(fonts/Sinhala.ttc); 
 
} 
 

 
#wrapperportfolio4 { 
 
\t width: 45%; 
 
\t float:left; 
 
\t position:relative; 
 
\t margin-left: 5%; 
 
\t margin-top: -42.5%; 
 
\t box-shadow: 3px 5px 4px 0px black; 
 
\t height: 20vw; 
 
\t 
 
\t 
 
} 
 

 
#wrapper4trans { 
 
\t width: 45%; 
 
\t float:left; 
 
\t position:relative; 
 
\t margin-left: 5%; 
 
\t margin-top: -42.5%; 
 
\t background-color: black; 
 
\t opacity: 0.5; 
 
\t height: 20vw; 
 
} 
 

 
#box1title { 
 
\t width: 65%; 
 
\t font-family: sinhala; 
 
\t font-size: 1.0vw; 
 
\t color: white; 
 
\t margin-top: 2%; 
 
\t text-align: center; 
 
} 
 

 

 

 
#box1img { 
 
\t width: 60%; 
 
\t position:relative; 
 
\t float:left; 
 
\t margin-left: 2.5%; 
 
\t margin-top: 1.5%; 
 
\t 
 
} 
 

 
#box1txt{ 
 
\t width: 25%; 
 
\t position:relative; 
 
\t float:left; 
 
\t font-family: sinhala; 
 
\t font-size: 1.0vw; 
 
\t color: white; 
 
\t margin-left: 5%; 
 
\t margin-top: 5%; 
 
\t text-shadow: 0px 2px 4px rgba(0,0,0,0.50); 
 

 
} 
 

 
#box1txt2{ 
 
\t width: 25%; 
 
\t position:relative; 
 
\t float:left; 
 
\t font-family: sinhala; 
 
\t font-size: 1.0vw; 
 
\t color: white; 
 
\t margin-left: 5%; 
 
\t margin-top: 5%; 
 
\t text-shadow: 0px 2px 4px rgba(0,0,0,0.50); 
 
} 
 

 
#box1link { 
 
\t width: 25%; 
 
\t position:relative; 
 
\t float:left; 
 
\t font-family: sinhala; 
 
\t font-size: 1.0vw; 
 
\t color: white; 
 
\t margin-left: 5%; 
 
\t margin-top: 5%; 
 
\t text-shadow: 0px 2px 4px rgba(0,0,0,0.50); 
 
\t cursor: pointer; 
 
}

<div id="wrapperportfolio4"> 
 

 
\t <p id="box1title">www.pieterswebdesign.com</p> 
 

 
\t 
 

 
\t \t \t <img id="box1img" src="images/box1img.png" /> 
 

 
\t \t \t \t <p id="box1txt">Pieter's Web Design is een beginnende webdesigner gevestigd in Gent.</p> 
 

 
\t \t \t \t \t <p id="box1txt2">Voor betaalbare professionele websites is dit de ideale oplossing.</p> 
 

 
\t \t \t \t \t \t <a id="box1link" href="https://www.pieterswebdesign.com">www.pieterswebdesign.com</a> 
 
\t </div>

来源

2016-09-23 Pieter

机会是它的字体，当你真的需要创建一个web字体包，并使用各种字体的文件类型：

例如：

@font-face { 
    font-family: 'FontName'; 
    src: url('fontname-webfont.eot'); 
    src: url('fontname-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fontname-webfont.woff2') format('woff2'), 
     url('fontname-webfont.woff') format('woff'), 
     url('fontname-webfont.ttf') format('truetype'), 
     url('fontname-webfont.svg') format('svg'); 
}

您应该使用web字体生成器，如： https://www.fontsquirrel.com/tools/webfont-generator

（很明显，你需要有一个许可使用某些字体作为网络字体所以最好将任何前进行检查。）

来源

2016-09-23 14:13:41

好的，我会看看thx的回复:) – Pieter

谢谢，正确的答案很好，我发布我的10分钟后复制我的矿！ –

哎呀srr已经调整thx的答案:) – Pieter

对浏览器的兼容性，你必须使用这个规则。

/* Fonts */ 
@font-face { 
    font-family: 'sinhala'; 
    src: url("./fonts/sinhala.eot"); 
    src: url("./fonts/sinhala.eot?#iefix") format('embedded-opentype'), 
     url("./fonts/sinhala.woff") format('woff'), 
     url("./fonts/sinhala.ttf") format('truetype'), 
     url("./fonts/sinhala.svg#montezregular") format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

你必须得到FONT的三种格式（woff，eot，ttf）。查看https://www.fontsquirrel.com/tools/webfont-generator 在此页面上，您可以将字体转换为正确的格式。

Succes！

来源

2016-09-23 14:23:27

@ font-face有时候有时会有效，而不是其他时间呢？

回答

相关问题