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

Conversation

Projects
None yet
2 participants
@sairion
Contributor

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

This comment has been minimized.

Show comment
Hide comment
@sairion

sairion Jan 12, 2017

Contributor

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

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

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

@disjukr

This comment has been minimized.

Show comment
Hide comment
@disjukr

disjukr Jan 13, 2017

Contributor
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 앞에 스페이스바 하나씩 더 들어가야 들여쓰기가 맞을 것 같아요

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

This comment has been minimized.

Show comment
Hide comment
@sairion

sairion Jan 15, 2017

Contributor

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

Contributor

sairion commented Jan 15, 2017

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

sairion added some commits Jan 12, 2017

Improve @font-face rule
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

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
Merge pull request #102 from sairion/gh-pages
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