Skip to content
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

Merged
merged 2 commits into from Jan 15, 2017
Merged

Improve @font-face rule #99

merged 2 commits into from Jan 15, 2017

Conversation

sairion
Copy link
Contributor

@sairion sairion commented Jan 12, 2017

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
Copy link
Contributor Author

sairion commented Jan 12, 2017

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

Copy link
Contributor

@disjukr disjukr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@disjukr
Copy link
Contributor

disjukr commented Jan 13, 2017

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
Copy link
Contributor Author

sairion commented Jan 15, 2017

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
@disjukr disjukr merged commit dd8ae83 into spoqa:master Jan 15, 2017
sairion added a commit to sairion/spoqa-han-sans that referenced this pull request Jan 16, 2017
yeun pushed a commit that referenced this pull request Jan 16, 2017
Apply changes in #99 to gh-pages for CDN users
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants