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

来源:2-5 导航页背影动画制作(@font-face实现小icon)

sesecss

2015-10-25 11:53

我检查了一下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";
}


写回答 关注

1回答

  • 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")


css3实现网页平滑过渡效果

CSS3 打造页面之间的平滑过渡效果,带来神奇的体验

54371 学习 · 372 问题

查看课程

相似问题