New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve @font-face rule #99
Conversation
Also I acknowledged there is no build script for css - that could make another PR, but I'm not sure anyone wants it so I'll simply share one I've written here: const FontData = [{
familyName: 'Spoqa Han Sans JP',
weights: [[700, 'Bold'], [400, 'Regular'], [200, 'Thin']],
familyDir: '../Subset/SpoqaHanSans_JP/Spoqa%20Han%20sans%20JP_subset(webfont%20inclued)',
}, {
familyName: 'Spoqa Han Sans',
weights: [[700, 'Bold'], [400, 'Regular'], [200, 'Thin']],
familyDir: '../Subset/SpoqaHanSans/Spoqa%20Han%20sans_subset(webfont%20inclued)',
}];
function template(dir, familyName, fileName, conciseName, weightNumber) {
return `@font-face {
font-family: '${familyName}';
font-weight: ${weightNumber};
src: url('${dir}${fileName}.eot');
src: local('${fileName}'),
url('${dir}${fileName}.eot?#iefix') format('embedded-opentype'),
url('${dir}${fileName}.woff2') format('woff2'),
url('${dir}${fileName}.woff') format('woff'),
url('${dir}${fileName}.ttf') format('truetype'),
url('${dir}${fileName}.svg#${conciseName}') format('svg');
}
`;
}
function getPrintedCSS(d) {
const conciseName = d.familyName.replace(/ /g, '');
const res = d.weights.reduce((prev, next) => {
const [weightNumber, weightTag] = next;
const fileName = `${conciseName}-${weightTag}`;
const dir = `${d.familyDir}/${fileName}/`;
return prev + template(dir, d.familyName, fileName, conciseName, weightNumber);
}, '');
return res
}
// JP
console.log(
getPrintedCSS(FontData[0])
);
// KR
console.log(
getPrintedCSS(FontData[1])
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
별로 중요한 건 아닌데 모든 format('truetype')
앞에 스페이스바가 하나씩 더 들어가있네요
여기서 |
scss와 less도 있는걸 몰랐네요. 추가하겠습니다. |
This commit introduces better @font-face rule for maxium compatibility and lower payload. Details: - WOFF precedes Truetype - introduce WOFF2 (not included before) - Better legacy env. support
Apply changes in #99 to gh-pages for CDN users
Fixes #98
This commit introduces better @font-face rule for maxium compatibility and lower payload.
Details: