free-font/index.html
2020-01-26 20:58:12 +08:00

200 lines
9.1 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>字集-免费字体</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/wordshub/free-font/css/theme.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.svg">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.svg">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.svg">
<style type="text/css">
html {
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="site-wrapper">
<!-- Header -->
<header class="header header-default">
<div class="header-main">
<div class="container">
<nav class="navbar navbar-default fhmm" role="navigation">
<script src="//cdn.jsdelivr.net/gh/wordshub/free-font/js/header.js"></script>
</nav>
</div>
</div>
</header>
<!-- Header / End -->
<!-- Main -->
<div class="main" role="main">
<!-- Page Content -->
<section class="page-content">
<div class="container project-feed-wrapper" style="visibility: hidden;">
<div class="clearfix">
<!-- Project Feed Filter -->
<ul class="project-feed-filter">
<li><a href="#" class="btn btn-black btn-primary2" data-filter="*">全部字体</a></li>
<li><a href="#" class="btn btn-black btn-default2" data-filter=".hei" id="hei">黑体系列</a></li>
<li><a href="#" class="btn btn-black btn-default2" data-filter=".song" id="song">宋体系列</a>
</li>
<li><a href="#" class="btn btn-black btn-default2" data-filter=".kai" id="kai">楷体系列</a></li>
<li><a href="#" class="btn btn-black btn-default2" data-filter=".yishu" id="yishu">艺术字体</a>
</li>
<li><a href="#" class="btn btn-black btn-default2" data-filter=".shouhui" id="shouhui">手绘字体</a></li>
</ul>
<!-- Project Feed Filter / End -->
</div>
<!-- Project Feed -->
<div id="fontset" class="project-feed row">
<!-- <div class="col-xs-12 col-sm-6 col-md-4 project-item hei">
<div class="project-item-inner">
<figure class="alignnone project-img">
<img src="images/font/siyuansongti/font.svg" alt="">
<div class="overlay">
<a href="font.html?SiYuanSongTi_Regular"class="dlink"></a>
</div>
</figure>
<div class="project-desc">
<a class="bold" href="font.html?SiYuanSongTi_Regular">思源宋体</a>
<a target="blank" href="https://github.com/adobe-fonts/source-han-serif"><span class="license">OFL-1.1</span></a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 project-item hei">
<div class="project-item-inner">
<figure class="alignnone project-img">
<img src="images/font/siyuanheiti/font.svg" alt="">
<div class="overlay">
<a href="font.html?SiYuanHeiTi_Regular" class="dlink"></a>
</div>
</figure>
<div class="project-desc">
<a class="bold" href="font.html?SiYuanHeiTi_Regular">思源黑体</a>
<span class="license">商免</span> <span class="license">授权</span>
</div>
</div>
</div> -->
</div>
</div>
</section>
<!-- Page Content / End -->
<!-- Footer -->
<footer class="myfooter">
<div class="container">
<script src="//cdn.jsdelivr.net/gh/wordshub/free-font/js/footer.js"></script>
</div>
</footer>
<!-- Footer / End -->
</div>
<!-- Main / End -->
</div>
<script src="//cdn.jsdelivr.net/gh/wordshub/free-font/vendor/jquery-1.11.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
<script src="//cdn.jsdelivr.net/gh/wordshub/free-font/vendor/isotope/isotope.pkgd.min.js"></script>
<script src="//unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/wordshub/free-font/js/custom.js"></script>
<script src="js/data.js"></script>
<script>
function insertFontNaviHtml() {
var mainNavi = new Array();
var tmpSName = "";
var isFirst = 0;
for (var fontname in fontsMap) {
isFirst++;
var name = fontsMap[fontname].name;
var type = fontsMap[fontname].type;
var license = fontsMap[fontname].license;
var source = fontsMap[fontname].source;
var auth = fontsMap[fontname].auth;
if (tmpSName != name) {
var longDesc = "";
tmpSName = name;
var fontType = "";
if (type == "1") {
fontType = "hei";
} else if (type == "2") {
fontType = "song";
} else if (type == "3") {
fontType = "kai";
} else if (type == "4") {
fontType = "yishu";
} else if (type == "5") {
fontType = "shouhui";
}
var preview = baseUrl + fontsMap[fontname].preview;
var placeholder = baseUrl + "images/placeholder.svg";
mainNavi.push('<div class="col-xs-12 col-sm-6 col-md-4 project-item ' + fontType + '"><div class="project-item-inner"><figure class="alignnone project-img">');
mainNavi.push('<img class="lazyload" src="' + placeholder + '" data-src="' + preview + '" alt="" />');
mainNavi.push('<div class="overlay"><a href="font.html?' + fontname + '" class="dlink"></a></div>');
mainNavi.push('</figure><div class="project-desc"><a class="fontTitle" href="font.html?' + fontname + '">' + name + '</a>');
mainNavi.push('<a target="blank" href="' + source + '"><span class="license">' + license + '</span></a>');
if (auth) {
mainNavi.push('<span class="license">需授权</span>');
}
mainNavi.push('</div></div></div>');
//mainNavi.push('<a class="'+className+'" href="font.html?'+fontname+'" longdesc="'+longDesc+'">'+SName+'</a>');
}
};
$("#fontset").append(mainNavi.join('\r\n'));
};
jQuery(document).ready(function() {
insertFontNaviHtml();
lazyload();
var the_font_type = location.search.substring(1); //hei
var $project_feed_wrapper = $(".project-feed-wrapper");
var $container = $('.project-feed, .masonry-feed');
$container.imagesLoaded(function() {
$container.isotope({
filter: '*',
resizable: false,
layoutMode: 'masonry',
itemSelector: '.project-item, .masonry-item'
});
var $filter = $('.project-feed-filter');
$filter.on('click', 'a', function() {
var filterValue = $(this).attr('data-filter');
$filter.find('a').removeClass('btn-primary2').addClass('btn-default2');
$(this).addClass('btn-primary2').removeClass('btn-default2');
$container.isotope({
filter: filterValue
});
return false;
});
if (the_font_type.length > 0) {
var $aimType = $filter.find("#" + the_font_type).click();
}
$project_feed_wrapper.css({
"visibility": "visible"
});
});
});
</script>
</body>
</html>