크롬 확장 그림자 DOM 임포트 부랩 글꼴

그래서 크롬 확장 콘텐츠 스크립트에서 추가 된 shadowroot에 부트 스트랩 3 아이콘을 표시하고 싶습니다. 지금까지 작동하지 않는 데 도움이됩니까?크롬 확장 그림자 DOM 임포트 부랩 글꼴

manifest.js는 web_accessible_resources에서 WOFF 파일을 포함하지

그림자 루트가 스타일 태그로가 있습니다

@import url(chrome-extension://[email protected]@extension_id__/fonts/glyphicons-halflings-regular.woff2);

나는 무엇을 놓치고?

출처

2017-12-02 Skaplun

글꼴을 가져 오려면 CSS 스타일 시트를 가져 오는 데 사용되는 @import url을 사용하면 안됩니다.

대신 @font-face 지정 문을 사용해야합니다.

또한이 지시문은 그림자 DOM이 아닌 HTML 페이지의 <head> 요소에 있어야합니다.

host.attachShadow({ mode: 'open' }) 
 
    .innerHTML = ` 
 
    <style>.icon { font-family: Icons; color: green ; font-size:30pt }</style> 
 
    <span class="icon">&#xe084</span>`

@font-face { 
 
    font-family: "Icons" ; 
 
    src: url("https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2") format("woff2") 
 
}

<div id=host></div>

당신은 자세한 내용 this SO answer을 읽을 수 있습니다.

출처

2017-12-02 19:18:15 Supersharp

크롬 확장 그림자 DOM 임포트 부랩 글꼴

답변

관련 문제