@font-face 有时工作有时有时不工作？

Question

我的 css 中的 @font-face 规则有问题。在某些样式表中它可以完美地工作在其他样式表中它根本不起作用...

正如您在代码片段中看到的那样，我为字体使用了一个外部文件，但在这种特殊情况下它不起作用...

大家有什么想法吗？

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

@charset "utf-8"

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

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

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

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



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

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

}

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

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

<div id="wrapperportfolio4">

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

 

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

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

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

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

Answer 1

可能是字体问题，因为您确实需要创建一个 webfont 工具包并使用各种字体文件类型：

例如：

@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');
}

您应该使用像这样的网络字体生成器： https://www.fontsquirrel.com/tools/webfont-generator

（显然，您需要获得许可才能将某些字体用作网络字体，因此最好在转换任何字体之前进行检查。）

Answer 2

为了浏览器兼容性，您必须使用此规则。

/* 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;
}

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

成功！

@font-face 有时工作有时有时不工作？

@font-face sometimes works sometimes and not other times?

html

css

font-face