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 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

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

@disjukr
Copy link
Contributor

@disjukr 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 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
@sairion sairion force-pushed the sairion:master branch from 83de1e0 to f446d8e Jan 15, 2017
@disjukr disjukr merged commit dd8ae83 into spoqa:master Jan 15, 2017
1 check passed
1 check passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
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
heeyeun
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
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants
You can’t perform that action at this time.