Improve @font-face rule

[sairion]

Fixes #98

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

[sairion]

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])
);

[sairion]

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])
);

[disjukr]

별로 중요한 건 아닌데 모든 format('truetype') 앞에 스페이스바가 하나씩 더 들어가있네요

[disjukr]

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');
}

여기서 url 앞에 스페이스바 하나씩 더 들어가야 들여쓰기가 맞을 것 같아요

[disjukr]

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');
}

여기서 url 앞에 스페이스바 하나씩 더 들어가야 들여쓰기가 맞을 것 같아요

[sairion]

scss와 less도 있는걸 몰랐네요. 추가하겠습니다.

[sairion]

scss와 less도 있는걸 몰랐네요. 추가하겠습니다.