로컬에 "Noto Sans CJK JP"가 없으면 웹 글꼴의 "Noto Sans JP"를 이용하는 CSS를 지정하는 방법

6927 단어 fontwebfont
2018년 6월 29일 현재, 웹 폰트의 「Noto Sans JP」로 자필할 수 없게 되어 있는 것을 확인했습니다.
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');
  }

좋은 웹페이지 즐겨찾기