add font sync
This commit is contained in:
kekee000
264
demo/sync/example.html
Normal file
264
demo/sync/example.html
Normal file
@@ -0,0 +1,264 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>icon example</title>
|
||||
<link rel="stylesheet" href="./page.css">
|
||||
<link rel="stylesheet" href="./icon.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<h1>fonteditor example</h1>
|
||||
<ul class="icon-list">
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE001"></i>
|
||||
<div class="code">\e001</div>
|
||||
<div class="name">uniE001</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE002"></i>
|
||||
<div class="code">\e002</div>
|
||||
<div class="name">uniE002</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE003"></i>
|
||||
<div class="code">\e003</div>
|
||||
<div class="name">uniE003</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE004"></i>
|
||||
<div class="code">\e004</div>
|
||||
<div class="name">uniE004</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE005"></i>
|
||||
<div class="code">\e005</div>
|
||||
<div class="name">uniE005</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE006"></i>
|
||||
<div class="code">\e006</div>
|
||||
<div class="name">uniE006</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE007"></i>
|
||||
<div class="code">\e007</div>
|
||||
<div class="name">uniE007</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE008"></i>
|
||||
<div class="code">\e008</div>
|
||||
<div class="name">uniE008</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE009"></i>
|
||||
<div class="code">\e009</div>
|
||||
<div class="name">uniE009</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE00A"></i>
|
||||
<div class="code">\e00a</div>
|
||||
<div class="name">uniE00A</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE00B"></i>
|
||||
<div class="code">\e00b</div>
|
||||
<div class="name">uniE00B</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE00C"></i>
|
||||
<div class="code">\e00c</div>
|
||||
<div class="name">uniE00C</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE00D"></i>
|
||||
<div class="code">\e00d</div>
|
||||
<div class="name">uniE00D</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE00E"></i>
|
||||
<div class="code">\e00e</div>
|
||||
<div class="name">uniE00E</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE00F"></i>
|
||||
<div class="code">\e00f</div>
|
||||
<div class="name">uniE00F</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE010"></i>
|
||||
<div class="code">\e010</div>
|
||||
<div class="name">uniE010</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE011"></i>
|
||||
<div class="code">\e011</div>
|
||||
<div class="name">uniE011</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE012"></i>
|
||||
<div class="code">\e012</div>
|
||||
<div class="name">uniE012</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE013"></i>
|
||||
<div class="code">\e013</div>
|
||||
<div class="name">uniE013</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE014"></i>
|
||||
<div class="code">\e014</div>
|
||||
<div class="name">uniE014</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE015"></i>
|
||||
<div class="code">\e015</div>
|
||||
<div class="name">uniE015</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE016"></i>
|
||||
<div class="code">\e016</div>
|
||||
<div class="name">uniE016</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE017"></i>
|
||||
<div class="code">\e017</div>
|
||||
<div class="name">uniE017</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE018"></i>
|
||||
<div class="code">\e018</div>
|
||||
<div class="name">uniE018</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE019"></i>
|
||||
<div class="code">\e019</div>
|
||||
<div class="name">uniE019</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE01A"></i>
|
||||
<div class="code">\e01a</div>
|
||||
<div class="name">uniE01A</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE01B"></i>
|
||||
<div class="code">\e01b</div>
|
||||
<div class="name">uniE01B</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE01C"></i>
|
||||
<div class="code">\e01c</div>
|
||||
<div class="name">uniE01C</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE01D"></i>
|
||||
<div class="code">\e01d</div>
|
||||
<div class="name">uniE01D</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE01E"></i>
|
||||
<div class="code">\e01e</div>
|
||||
<div class="name">uniE01E</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE01F"></i>
|
||||
<div class="code">\e01f</div>
|
||||
<div class="name">uniE01F</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE020"></i>
|
||||
<div class="code">\e020</div>
|
||||
<div class="name">uniE020</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE021"></i>
|
||||
<div class="code">\e021</div>
|
||||
<div class="name">uniE021</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE022"></i>
|
||||
<div class="code">\e022</div>
|
||||
<div class="name">uniE022</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE023"></i>
|
||||
<div class="code">\e023</div>
|
||||
<div class="name">uniE023</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE024"></i>
|
||||
<div class="code">\e024</div>
|
||||
<div class="name">uniE024</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE025"></i>
|
||||
<div class="code">\e025</div>
|
||||
<div class="name">uniE025</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE026"></i>
|
||||
<div class="code">\e026</div>
|
||||
<div class="name">uniE026</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE027"></i>
|
||||
<div class="code">\e027</div>
|
||||
<div class="name">uniE027</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE028"></i>
|
||||
<div class="code">\e028</div>
|
||||
<div class="name">uniE028</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon icon-uniE029"></i>
|
||||
<div class="code">\e029</div>
|
||||
<div class="name">uniE029</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
45
demo/sync/font.php
Normal file
45
demo/sync/font.php
Normal file
@@ -0,0 +1,45 @@
|
||||
<?php
|
||||
header('Content-Type: application/javascript');
|
||||
|
||||
function callback($data) {
|
||||
echo json_encode($data);
|
||||
}
|
||||
|
||||
|
||||
function writeFile($base64Str, $outputfile) {
|
||||
$ifp = fopen($outputfile, "wb");
|
||||
fwrite($ifp, base64_decode( $base64Str));
|
||||
fclose($ifp);
|
||||
return($outputfile);
|
||||
}
|
||||
|
||||
function main() {
|
||||
$fontName = $_POST['fontName']; // 字体名字
|
||||
$fontType = $_POST['fontType']; // 字体类型，多个类型用`,`隔开
|
||||
$encode = $_POST['encode']; // 编码，默认base64
|
||||
|
||||
if (empty($fontName)) {
|
||||
callback(array(
|
||||
status => 1,
|
||||
statusInfo => '没有同步的字体名!'
|
||||
));
|
||||
return;
|
||||
}
|
||||
|
||||
$count = 0;
|
||||
if (empty($encode) || $encode === 'base64') {
|
||||
foreach (explode(',', $fontType) as $type) {
|
||||
if (!empty($_POST[$type])) {
|
||||
writeFile($_POST[$type], $fontName.'.'.$type);
|
||||
$count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
callback(array(
|
||||
status => 0,
|
||||
statusInfo => 'sync '.$count.'font files.'
|
||||
));
|
||||
}
|
||||
|
||||
main();
|
||||
193
demo/sync/icon.css
Normal file
193
demo/sync/icon.css
Normal file
@@ -0,0 +1,193 @@
|
||||
/**
|
||||
* @file icon.css
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "fonteditor";
|
||||
src: url("fonteditor.eot"); /* IE9 */
|
||||
src: url("fonteditor.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
|
||||
url("fonteditor.woff") format("woff"), /* chrome、firefox */
|
||||
url("fonteditor.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
|
||||
url("fonteditor.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
[class^="icon-"],
|
||||
[class*=" icon-"]:after {
|
||||
font-family: "fonteditor";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
|
||||
.icon-uniE001:before {
|
||||
content: "\e001";
|
||||
}
|
||||
|
||||
.icon-uniE002:before {
|
||||
content: "\e002";
|
||||
}
|
||||
|
||||
.icon-uniE003:before {
|
||||
content: "\e003";
|
||||
}
|
||||
|
||||
.icon-uniE004:before {
|
||||
content: "\e004";
|
||||
}
|
||||
|
||||
.icon-uniE005:before {
|
||||
content: "\e005";
|
||||
}
|
||||
|
||||
.icon-uniE006:before {
|
||||
content: "\e006";
|
||||
}
|
||||
|
||||
.icon-uniE007:before {
|
||||
content: "\e007";
|
||||
}
|
||||
|
||||
.icon-uniE008:before {
|
||||
content: "\e008";
|
||||
}
|
||||
|
||||
.icon-uniE009:before {
|
||||
content: "\e009";
|
||||
}
|
||||
|
||||
.icon-uniE00A:before {
|
||||
content: "\e00a";
|
||||
}
|
||||
|
||||
.icon-uniE00B:before {
|
||||
content: "\e00b";
|
||||
}
|
||||
|
||||
.icon-uniE00C:before {
|
||||
content: "\e00c";
|
||||
}
|
||||
|
||||
.icon-uniE00D:before {
|
||||
content: "\e00d";
|
||||
}
|
||||
|
||||
.icon-uniE00E:before {
|
||||
content: "\e00e";
|
||||
}
|
||||
|
||||
.icon-uniE00F:before {
|
||||
content: "\e00f";
|
||||
}
|
||||
|
||||
.icon-uniE010:before {
|
||||
content: "\e010";
|
||||
}
|
||||
|
||||
.icon-uniE011:before {
|
||||
content: "\e011";
|
||||
}
|
||||
|
||||
.icon-uniE012:before {
|
||||
content: "\e012";
|
||||
}
|
||||
|
||||
.icon-uniE013:before {
|
||||
content: "\e013";
|
||||
}
|
||||
|
||||
.icon-uniE014:before {
|
||||
content: "\e014";
|
||||
}
|
||||
|
||||
.icon-uniE015:before {
|
||||
content: "\e015";
|
||||
}
|
||||
|
||||
.icon-uniE016:before {
|
||||
content: "\e016";
|
||||
}
|
||||
|
||||
.icon-uniE017:before {
|
||||
content: "\e017";
|
||||
}
|
||||
|
||||
.icon-uniE018:before {
|
||||
content: "\e018";
|
||||
}
|
||||
|
||||
.icon-uniE019:before {
|
||||
content: "\e019";
|
||||
}
|
||||
|
||||
.icon-uniE01A:before {
|
||||
content: "\e01a";
|
||||
}
|
||||
|
||||
.icon-uniE01B:before {
|
||||
content: "\e01b";
|
||||
}
|
||||
|
||||
.icon-uniE01C:before {
|
||||
content: "\e01c";
|
||||
}
|
||||
|
||||
.icon-uniE01D:before {
|
||||
content: "\e01d";
|
||||
}
|
||||
|
||||
.icon-uniE01E:before {
|
||||
content: "\e01e";
|
||||
}
|
||||
|
||||
.icon-uniE01F:before {
|
||||
content: "\e01f";
|
||||
}
|
||||
|
||||
.icon-uniE020:before {
|
||||
content: "\e020";
|
||||
}
|
||||
|
||||
.icon-uniE021:before {
|
||||
content: "\e021";
|
||||
}
|
||||
|
||||
.icon-uniE022:before {
|
||||
content: "\e022";
|
||||
}
|
||||
|
||||
.icon-uniE023:before {
|
||||
content: "\e023";
|
||||
}
|
||||
|
||||
.icon-uniE024:before {
|
||||
content: "\e024";
|
||||
}
|
||||
|
||||
.icon-uniE025:before {
|
||||
content: "\e025";
|
||||
}
|
||||
|
||||
.icon-uniE026:before {
|
||||
content: "\e026";
|
||||
}
|
||||
|
||||
.icon-uniE027:before {
|
||||
content: "\e027";
|
||||
}
|
||||
|
||||
.icon-uniE028:before {
|
||||
content: "\e028";
|
||||
}
|
||||
|
||||
.icon-uniE029:before {
|
||||
content: "\e029";
|
||||
}
|
||||
|
||||
|
||||
|
||||
137
demo/sync/page.css
Normal file
137
demo/sync/page.css
Normal file
@@ -0,0 +1,137 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
blockquote,
|
||||
body,
|
||||
button,
|
||||
dd,
|
||||
dl,
|
||||
dt,
|
||||
fieldset,
|
||||
form,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
input,
|
||||
legend,
|
||||
li,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
td,
|
||||
textarea,
|
||||
th,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: 12px/1.5 tahoma, arial, sans-serif;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
}
|
||||
address,
|
||||
cite,
|
||||
dfn,
|
||||
em,
|
||||
var {
|
||||
font-style: normal;
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: courier new, courier, monospace;
|
||||
}
|
||||
small {
|
||||
font-size: 12px;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
legend {
|
||||
color: #000000;
|
||||
}
|
||||
fieldset,
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
}
|
||||
.main h1 {
|
||||
font-size: 36px;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
.icon-list {
|
||||
overflow: hidden;
|
||||
}
|
||||
.icon-list li {
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
.icon-list .icon {
|
||||
font-size: 42px;
|
||||
line-height: 100px;
|
||||
margin: 10px 0;
|
||||
color: #333;
|
||||
font-style: normal;
|
||||
-webkit-transition: font-size 0.25s ease-out 0s;
|
||||
-moz-transition: font-size 0.25s ease-out 0s;
|
||||
transition: font-size 0.25s ease-out 0s;
|
||||
}
|
||||
.icon-list .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
.icon-list .code {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
Reference in New Issue
Block a user