问答详情
源自:2-5 导航页背影动画制作(@font-face实现小icon)

@font-face按照视频里的设置了,页面没有任何显示

我检查了一下src链接的路径没有错,但是不知道为什么就是页面不显示,起先以为是浏览器兼容问题,但是用了其他浏览器,也还是没有显示??望大神搭救!!

以下是我截取跟字体设置有关的代码

@font-face{
	font-family: "raphaelicons";
	src:url("fonts/raphaelicons-webfont.eot") format("eot"),
	url("fonts/raphaelicons-webfont.ttf") format("ttf"),
	url("fonts/raphaelicons-webfont.woff") format("woff"),
	url("fonts/raphaelicons-webfont.svg") format("svg");
	font-weight:normal;
	font-style: normal;
}


[data-icon]:after{
	content: attr(data-icon);
	width: 200px;
	height: 200px;
	/*background: #0f0;*/
	color: #fff;
	font-size: 90px;
	text-align: center;
	line-height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -110px 0 0 -65px;
	-webkit-transform:translateY(25%) rotate(-45deg);
	font-family: "raphaelicons";
}


提问者:sesecss 2015-10-25 11:53

个回答

  • sesecss
    2015-10-25 11:59:19

    以解决,是src链接路径问题,哈哈,正确路径应该是

    src:url("../fonts/raphaelicons-webfont.eot") format("ttf"),

    url("../fonts/raphaelicons-webfont.ttf") format("ttf"),

    url("../fonts/raphaelicons-webfont.woff") format("woff"),

    url("../fonts/raphaelicons-webfont.svg") format("svg")