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

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

（显然你需要获得许可才能使用某些字体作为webfonts，所以最好在转换之前检查一下。）

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

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

SUCCES！

@ font-face有时会工作而不是其他时间？

2 个答案: