로컬에 "Noto Sans CJK JP"가 없으면 웹 글꼴의 "Noto Sans JP"를 이용하는 CSS를 지정하는 방법
Google이 사양을 변경했을 수 있습니다.
Noto Sans KR "의 웹 글꼴을 사용하면 모든 기기에서 문자 표현을 통합할 수 있습니다."
그러나 일본어 웹 글꼴은 용량이 큽니다.
이미 로컬에 "Noto Sans CJK KR"이 설치되어 있다면 웹 글꼴을 읽지 않고 그 곳을 이용하고 싶습니다.
그런 요망을 이루는 방법입니다.
결론
"Noto Sans KR"의 CSS에 local("Noto Sans CJK JP <太さ>")
를 추가하기 만하면됩니다.
원본 CSS
수정된 CSS
표시 확인용 데모 페이지
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
+ src: local("Noto Sans CJK JP Regular"),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}
하지만 페이지는 아래와 같이 표시되어야합니다.
이전에는 두께에 관계없이 Noto Sans CJK JP
라고 지정하는 것만으로 자동으로 두께에 대응해 주었습니다.
그러나 현재는 아래와 같이 개별적으로 지정할 필요가 있습니다.
- src: local("Noto Sans CJK JP Thin"),
- src: local("Noto Sans CJK JP Light"),
- src: local("Noto Sans CJK KR Regular"),
@font-face 해설 (MDN)
@font-face의 브라우저 대응 상황 (Can I use)
"Noto Sans Korean"은 사용하지 않습니다.
2018년 6월 29일 현재, 웹 폰트의 「Noto Sans JP」로 자필할 수 없게 되어 있는 것을 확인했습니다.
Google이 사양을 변경했을 수 있습니다.
현재 웹 폰트로서 제공되고 있는 "Noto Sans"의 일본어 폰트는 아래와 같은 2 종류가 있습니다.
후발의 "JP"라면 CSS로 글자 채울 수 있습니다.
웹 글꼴
특징
Noto Sans Korean
글자 넣을 수 없다
Noto Sans KR
글자 수
양자의 자세한 차이는 아래를.
Google Fonts의 일본어 글꼴 "Noto Fonts" 사용법 | OXY NOTES
CSS의 font-feature-settings 속성에 의한 글자 채우기에 대해서는 다음을. 문자 채울 수 있는 CSS의 font-feature-settings가 굉장하다! 일본어 글꼴이 지정하고자 하는 자동 커닝 - ICS MEDIA 검증
두 개의 웹 글꼴로 글자를 채울 수 있는지 실제로 확인하십시오.
또한 "Noto Sans CJK JP"에서 확인할 수 있습니다. (장비에 "Noto Sans CJK KR"이 설치된 경우에만) 데모 페이지
소스 코드
아래 스크린샷의 빨간색 테두리와 같이 웹 글꼴의 "Noto Sans JP"와 로컬 "Noto Sans CJK JP"에서는 글자 채우기가 활성화되어야 합니다.
로컬 "Noto Sans KR"은 사용하지 않습니다.
웹 폰트의 "Noto Sans Japanese"를 로컬에 인스톨 하면, 폰트명은 "Noto Sans JP"가 되어 버리는 것 같습니다.
그 때문에, 글자를 채울 수 있는 웹 폰트의 "Noto Sans JP"와 구별이 붙지 않게 되어 버립니다.
모처럼이라면 확실히 문자 채우기를 유효하게 해 모든 기기에서 같은 문자 표현을 실현하고 싶기 때문에, 이번은 로컬의 "Noto Sans JP"는 사용하지 않습니다.
단, 글자를 사용하지 않는 경우는 local("Noto Sans JP")
를 추가할 수 있습니다.
아래와 같이 됩니다.
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
src: local("Noto Sans CJK JP"),
+ local("Noto Sans JP"),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}
Reference
이 문제에 관하여(로컬에 "Noto Sans CJK JP"가 없으면 웹 글꼴의 "Noto Sans JP"를 이용하는 CSS를 지정하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sutara79/items/7f0c6365e5935311b1f8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
+ src: local("Noto Sans CJK JP Regular"),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}
2018년 6월 29일 현재, 웹 폰트의 「Noto Sans JP」로 자필할 수 없게 되어 있는 것을 확인했습니다.
Google이 사양을 변경했을 수 있습니다.
현재 웹 폰트로서 제공되고 있는 "Noto Sans"의 일본어 폰트는 아래와 같은 2 종류가 있습니다.
후발의 "JP"라면 CSS로 글자 채울 수 있습니다.
웹 글꼴
특징
Noto Sans Korean
글자 넣을 수 없다
Noto Sans KR
글자 수
양자의 자세한 차이는 아래를.
Google Fonts의 일본어 글꼴 "Noto Fonts" 사용법 | OXY NOTES CSS의 font-feature-settings 속성에 의한 글자 채우기에 대해서는 다음을. 문자 채울 수 있는 CSS의 font-feature-settings가 굉장하다! 일본어 글꼴이 지정하고자 하는 자동 커닝 - ICS MEDIA 검증 두 개의 웹 글꼴로 글자를 채울 수 있는지 실제로 확인하십시오. 또한 "Noto Sans CJK JP"에서 확인할 수 있습니다. (장비에 "Noto Sans CJK KR"이 설치된 경우에만) 데모 페이지
소스 코드
아래 스크린샷의 빨간색 테두리와 같이 웹 글꼴의 "Noto Sans JP"와 로컬 "Noto Sans CJK JP"에서는 글자 채우기가 활성화되어야 합니다.
로컬 "Noto Sans KR"은 사용하지 않습니다.
웹 폰트의 "Noto Sans Japanese"를 로컬에 인스톨 하면, 폰트명은 "Noto Sans JP"가 되어 버리는 것 같습니다.
그 때문에, 글자를 채울 수 있는 웹 폰트의 "Noto Sans JP"와 구별이 붙지 않게 되어 버립니다.
모처럼이라면 확실히 문자 채우기를 유효하게 해 모든 기기에서 같은 문자 표현을 실현하고 싶기 때문에, 이번은 로컬의 "Noto Sans JP"는 사용하지 않습니다.
단, 글자를 사용하지 않는 경우는 local("Noto Sans JP")
를 추가할 수 있습니다.
아래와 같이 됩니다.
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
src: local("Noto Sans CJK JP"),
+ local("Noto Sans JP"),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}
Reference
이 문제에 관하여(로컬에 "Noto Sans CJK JP"가 없으면 웹 글꼴의 "Noto Sans JP"를 이용하는 CSS를 지정하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sutara79/items/7f0c6365e5935311b1f8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
src: local("Noto Sans CJK JP"),
+ local("Noto Sans JP"),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}
Reference
이 문제에 관하여(로컬에 "Noto Sans CJK JP"가 없으면 웹 글꼴의 "Noto Sans JP"를 이용하는 CSS를 지정하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sutara79/items/7f0c6365e5935311b1f8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)