폴리머 요소에 웹 글꼴을로드하는 올바른 방법은 무엇입니까

Question

7segment 디스플레이를 모방하기 위해 약간의 폴리머 요소를 만들었습니다. 요소는 fontlibrary.org/face/segment7 글꼴을로드해야합니다.

요소에 대해 올바른 방법으로로드하는 방법은 무엇입니까? 처음에는

, 내가 넣어 :

<link rel="import" href="../polymer/polymer.html"> 
<link rel="stylesheet" type="text/css" media="screen" href="https://fontlibrary.org/face/segment7"/> 

를 요소에. 파이어 폭스에서 작동하지 않았지만 (크롬에 포함되어 있었기 때문에) 더 많이 검색하여 www.polymer-project.org/1.0/docs/devguide/styling#style-modules를 찾았습니다. 그래서 요소를 수정하여 코드를 수정했습니다.

<link rel="import" href="../polymer/polymer.html"> 
<link rel="import" href="font-segment7.html"> 

및 폰트 segment.html 파일을 생성 : 행

<dom-module id="font-segment7"> 
<link rel="stylesheet" type="text/css" media="screen" href="https://fontlibrary.org/face/segment7"/> 
</dom-module> 

결과하지 파이어 (에러없이 상기 폰트 파일 segment.html 크롬에서 작동 같다 다운로드됩니다), 그래서,이 종류의 간접 지정이 그것을 위해 설계되었는지 궁금하네요. 공유 스타일에 대한 것이지 한방에 대한 것이 아니라고 생각합니다.

요소의 데모 여기 https://potens1.gitlab.io/seven-segment-element/components/seven-segment-element/되고 코드 저장소 https://gitlab.com/potens1/seven-segment-element

이 webcomponents 작동하는 방법이다 (중합체?)가 나 폰트 성분에 포함되어야 하는가?

감사합니다.

PS : 죄송합니다, 충분한 명성 나는 폴리머 프로젝트를 수행하는 방법으로 글꼴을 포함하는 올바른 방법을 정의 할 링크

Answer 1

를 게시 : font-roboto는

은 "요소는"단지 구성 <style> 태그

당신을 위해이이 (font-segment7.html)과 같습니다

<link rel="stylesheet" href="https://fontlibrary.org/face/segment7"/> 

이것은 당신의 seven-segment-element와 파이어 폭스에서 나를 위해 작동합니다.

참고 : fontlibrary는 IE에서 부분적으로 만 지원되는 .otf (OpenType)로 segment7 글꼴을 제공합니다.