Improve the fonts.less experience
Summary: Create a fonts.less file which generates identical css to fonts.css, but using less rules to be more understandable and customizable. For example, add the ability to change where the fonts directory is located (instead of mandating it be located next to the less file), and add the ability to disable specific font formats (like disable EOTs when IE8 support isn't needed). Test Plan: - Ensure that the test page and huxley page still work - Ensure that the output of `./node_modules/.bin/lessc static/fonts.less` is the same as the original css by running both through `./node_modules/.bin/cleancss` and diffing them. - Ensure that the huxley screenshots haven't changed - Ensure that the build step still works Reviewers: alpert Reviewed By: alpert Differential Revision: http://phabricator.khanacademy.org/D13326
This commit is contained in:
Emily Eisenberg
parent
824fb7fd2f
commit
bd6f762f94
9
Makefile
9
Makefile
|
|
@ -10,13 +10,10 @@ build/katex.js: katex.js $(wildcard src/*.js)
|
|||
build/katex.min.js: build/katex.js
|
||||
./node_modules/.bin/uglifyjs --mangle < $< > $@
|
||||
|
||||
build/katex.less.css: static/katex.less
|
||||
./node_modules/.bin/lessc $< > $@
|
||||
build/%.less.css: static/%.less
|
||||
./node_modules/.bin/lessc $< $@
|
||||
|
||||
build/katex.css: build/katex.less.css static/fonts.css
|
||||
cat $^ > $@
|
||||
|
||||
build/katex.min.css: build/katex.css
|
||||
build/katex.min.css: build/katex.less.css
|
||||
./node_modules/.bin/cleancss -o $@ $<
|
||||
|
||||
.PHONY: build/fonts
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
"devDependencies": {
|
||||
"browserify": "~2.29.1",
|
||||
"express": "~3.3.3",
|
||||
"less": "~1.4.2",
|
||||
"less": "~1.7.5",
|
||||
"uglify-js": "~2.4.15",
|
||||
"clean-css": "~2.2.15",
|
||||
"huxley": "~0.8.1",
|
||||
|
|
|
|||
11
server.js
11
server.js
|
|
@ -30,13 +30,20 @@ app.get("/katex.css", function(req, res, next) {
|
|||
next(err);
|
||||
return;
|
||||
}
|
||||
less.render(data, function(err, css) {
|
||||
|
||||
var parser = new less.Parser({
|
||||
paths: ["./static"],
|
||||
filename: "katex.less"
|
||||
});
|
||||
|
||||
parser.parse(data, function(err, tree) {
|
||||
if (err) {
|
||||
next(err);
|
||||
return;
|
||||
}
|
||||
|
||||
res.setHeader("Content-Type", "text/css");
|
||||
res.send(css);
|
||||
res.send(tree.toCSS());
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
239
static/fonts.css
239
static/fonts.css
|
|
@ -1,239 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'KaTeX_AMS';
|
||||
src: url('fonts/KaTeX_AMS-Regular.eot');
|
||||
src: url('fonts/KaTeX_AMS-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_AMS-Regular.woff') format('woff'),
|
||||
url('fonts/KaTeX_AMS-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Caligraphic';
|
||||
src: url('fonts/KaTeX_Caligraphic-Bold.eot');
|
||||
src: url('fonts/KaTeX_Caligraphic-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Caligraphic-Bold.woff') format('woff'),
|
||||
url('fonts/KaTeX_Caligraphic-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Caligraphic';
|
||||
src: url('fonts/KaTeX_Caligraphic-Regular.eot');
|
||||
src: url('fonts/KaTeX_Caligraphic-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Caligraphic-Regular.woff') format('woff'),
|
||||
url('fonts/KaTeX_Caligraphic-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Fraktur';
|
||||
src: url('fonts/KaTeX_Fraktur-Bold.eot');
|
||||
src: url('fonts/KaTeX_Fraktur-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Fraktur-Bold.woff') format('woff'),
|
||||
url('fonts/KaTeX_Fraktur-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Fraktur';
|
||||
src: url('fonts/KaTeX_Fraktur-Regular.eot');
|
||||
src: url('fonts/KaTeX_Fraktur-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Fraktur-Regular.woff') format('woff'),
|
||||
url('fonts/KaTeX_Fraktur-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Greek';
|
||||
src: url('fonts/KaTeX_Greek-Bold.eot');
|
||||
src: url('fonts/KaTeX_Greek-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Greek-Bold.woff') format('woff'),
|
||||
url('fonts/KaTeX_Greek-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Greek';
|
||||
src: url('fonts/KaTeX_Greek-BoldItalic.eot');
|
||||
src: url('fonts/KaTeX_Greek-BoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Greek-BoldItalic.woff') format('woff'),
|
||||
url('fonts/KaTeX_Greek-BoldItalic.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Greek';
|
||||
src: url('fonts/KaTeX_Greek-Italic.eot');
|
||||
src: url('fonts/KaTeX_Greek-Italic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Greek-Italic.woff') format('woff'),
|
||||
url('fonts/KaTeX_Greek-Italic.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Greek';
|
||||
src: url('fonts/KaTeX_Greek-Regular.eot');
|
||||
src: url('fonts/KaTeX_Greek-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Greek-Regular.woff') format('woff'),
|
||||
url('fonts/KaTeX_Greek-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Main';
|
||||
src: url('fonts/KaTeX_Main-Bold.eot');
|
||||
src: url('fonts/KaTeX_Main-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Main-Bold.woff') format('woff'),
|
||||
url('fonts/KaTeX_Main-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Main';
|
||||
src: url('fonts/KaTeX_Main-Italic.eot');
|
||||
src: url('fonts/KaTeX_Main-Italic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Main-Italic.woff') format('woff'),
|
||||
url('fonts/KaTeX_Main-Italic.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Main';
|
||||
src: url('fonts/KaTeX_Main-Regular.eot');
|
||||
src: url('fonts/KaTeX_Main-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Main-Regular.woff') format('woff'),
|
||||
url('fonts/KaTeX_Main-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Math';
|
||||
src: url('fonts/KaTeX_Math-BoldItalic.eot');
|
||||
src: url('fonts/KaTeX_Math-BoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Math-BoldItalic.woff') format('woff'),
|
||||
url('fonts/KaTeX_Math-BoldItalic.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Math';
|
||||
src: url('fonts/KaTeX_Math-Italic.eot');
|
||||
src: url('fonts/KaTeX_Math-Italic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Math-Italic.woff') format('woff'),
|
||||
url('fonts/KaTeX_Math-Italic.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Math';
|
||||
src: url('fonts/KaTeX_Math-Regular.eot');
|
||||
src: url('fonts/KaTeX_Math-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Math-Regular.woff') format('woff'),
|
||||
url('fonts/KaTeX_Math-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_SansSerif';
|
||||
src: url('fonts/KaTeX_SansSerif-Bold.eot');
|
||||
src: url('fonts/KaTeX_SansSerif-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_SansSerif-Bold.woff') format('woff'),
|
||||
url('fonts/KaTeX_SansSerif-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_SansSerif';
|
||||
src: url('fonts/KaTeX_SansSerif-Italic.eot');
|
||||
src: url('fonts/KaTeX_SansSerif-Italic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_SansSerif-Italic.woff') format('woff'),
|
||||
url('fonts/KaTeX_SansSerif-Italic.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_SansSerif';
|
||||
src: url('fonts/KaTeX_SansSerif-Regular.eot');
|
||||
src: url('fonts/KaTeX_SansSerif-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_SansSerif-Regular.woff') format('woff'),
|
||||
url('fonts/KaTeX_SansSerif-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Script';
|
||||
src: url('fonts/KaTeX_Script-Regular.eot');
|
||||
src: url('fonts/KaTeX_Script-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Script-Regular.woff') format('woff'),
|
||||
url('fonts/KaTeX_Script-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Size1';
|
||||
src: url('fonts/KaTeX_Size1-Regular.eot');
|
||||
src: url('fonts/KaTeX_Size1-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Size1-Regular.woff') format('woff'),
|
||||
url('fonts/KaTeX_Size1-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Size2';
|
||||
src: url('fonts/KaTeX_Size2-Regular.eot');
|
||||
src: url('fonts/KaTeX_Size2-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Size2-Regular.woff') format('woff'),
|
||||
url('fonts/KaTeX_Size2-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Size3';
|
||||
src: url('fonts/KaTeX_Size3-Regular.eot');
|
||||
src: url('fonts/KaTeX_Size3-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Size3-Regular.woff') format('woff'),
|
||||
url('fonts/KaTeX_Size3-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Size4';
|
||||
src: url('fonts/KaTeX_Size4-Regular.eot');
|
||||
src: url('fonts/KaTeX_Size4-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Size4-Regular.woff') format('woff'),
|
||||
url('fonts/KaTeX_Size4-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KaTeX_Typewriter';
|
||||
src: url('fonts/KaTeX_Typewriter-Regular.eot');
|
||||
src: url('fonts/KaTeX_Typewriter-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/KaTeX_Typewriter-Regular.woff') format('woff'),
|
||||
url('fonts/KaTeX_Typewriter-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
67
static/fonts.less
Normal file
67
static/fonts.less
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
@font-folder: "fonts";
|
||||
@use-eot: true;
|
||||
@use-ttf: true;
|
||||
@use-woff: true;
|
||||
|
||||
.use-eot(@family, @family-suffix) when (@use-eot = true) {
|
||||
src: url('@{font-folder}/KaTeX_@{family}-@{family-suffix}.eot');
|
||||
src+: url('@{font-folder}/KaTeX_@{family}-@{family-suffix}.eot#iefix') format('embedded-opentype')
|
||||
}
|
||||
|
||||
.use-woff(@family, @family-suffix) when (@use-woff = true) {
|
||||
src+: url('@{font-folder}/KaTeX_@{family}-@{family-suffix}.woff') format('woff')
|
||||
}
|
||||
|
||||
.use-ttf(@family, @family-suffix) when (@use-ttf = true) {
|
||||
src+: url('@{font-folder}/KaTeX_@{family}-@{family-suffix}.ttf') format('ttf')
|
||||
}
|
||||
|
||||
.generate-suffix(@weight, @style) when (@weight = normal) and (@style = normal) {
|
||||
@suffix: 'Regular';
|
||||
}
|
||||
.generate-suffix(@weight, @style) when (@weight = normal) and (@style = italic) {
|
||||
@suffix: 'Italic';
|
||||
}
|
||||
.generate-suffix(@weight, @style) when (@weight = bold) and (@style = normal) {
|
||||
@suffix: 'Bold';
|
||||
}
|
||||
.generate-suffix(@weight, @style) when (@weight = bold) and (@style = italic) {
|
||||
@suffix: 'BoldItalic';
|
||||
}
|
||||
|
||||
.font-face(@family, @weight, @style) {
|
||||
.generate-suffix(@weight, @style);
|
||||
@font-face {
|
||||
font-family: 'KaTeX_@{family}';
|
||||
.use-eot(@family, @suffix);
|
||||
.use-woff(@family, @suffix);
|
||||
.use-ttf(@family, @suffix);
|
||||
font-weight: @weight;
|
||||
font-style: @style;
|
||||
}
|
||||
}
|
||||
|
||||
.font-face('AMS', normal, normal);
|
||||
.font-face('Caligraphic', bold, normal);
|
||||
.font-face('Caligraphic', normal, normal);
|
||||
.font-face('Fraktur', bold, normal);
|
||||
.font-face('Fraktur', normal, normal);
|
||||
.font-face('Greek', bold, normal);
|
||||
.font-face('Greek', bold, italic);
|
||||
.font-face('Greek', normal, italic);
|
||||
.font-face('Greek', normal, normal);
|
||||
.font-face('Main', bold, normal);
|
||||
.font-face('Main', normal, italic);
|
||||
.font-face('Main', normal, normal);
|
||||
.font-face('Math', bold, italic);
|
||||
.font-face('Math', normal, italic);
|
||||
.font-face('Math', normal, normal);
|
||||
.font-face('SansSerif', bold, normal);
|
||||
.font-face('SansSerif', normal, italic);
|
||||
.font-face('SansSerif', normal, normal);
|
||||
.font-face('Script', normal, normal);
|
||||
.font-face('Size1', normal, normal);
|
||||
.font-face('Size2', normal, normal);
|
||||
.font-face('Size3', normal, normal);
|
||||
.font-face('Size4', normal, normal);
|
||||
.font-face('Typewriter', normal, normal);
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>KaTeX Test</title>
|
||||
<script src="katex.js" type="text/javascript"></script>
|
||||
<link href="fonts.css" rel="stylesheet" type="text/css">
|
||||
<link href="katex.css" rel="stylesheet" type="text/css">
|
||||
<link href="main.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "fonts.less";
|
||||
|
||||
.katex {
|
||||
font: normal 1.21em KaTeX_Main;
|
||||
line-height: 1.2;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>Huxley test</title>
|
||||
<script src="/katex.js" type="text/javascript"></script>
|
||||
<link href="/fonts.css" rel="stylesheet" type="text/css">
|
||||
<link href="/katex.css" rel="stylesheet" type="text/css">
|
||||
<style type="text/css">
|
||||
#math, #pre, #post {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user