폴리머에 사용자 정의 글꼴을 사용하는 방법

일반 폴리머 2.0 로그인 페이지 응용 프로그램에서 작업 중이며 제목 표시 줄에 사용자 정의 글꼴을 사용하려고합니다. 내 로그인-page.html에서 폴리머에 사용자 정의 글꼴을 사용하는 방법

, 나는 사용자 정의 스타일이 있습니다

<custom-style> 
    <style is="custom-style"> 
      body { 
      margin: 0; 
     }   
     app-toolbar { 
      background-color: #4F1585; 
      font-family: 'Roboto', Helvetica, sans-serif; 
      color: white; 
      --app-toolbar-font-size: 24px; 
     } 
     #maintitle{ 
      color: red; 
      font-family: 'font-regular'; 
     } 
    </style> 
</custom-style>

그리고 내 헤더/도구 모음 :이 같은 TTF 파일을 가져

<app-header fixed condenses effects="waterfall"> 
    <app-toolbar> 
     <img src="../icons/app-icon.png" style="height:100%;"/> 
     <div main-title id="maintitle">Login Page</div> 
    </app-toolbar> 
</app-header>

그리고 :

<link rel="stylesheet" href="../fonts/font-regular.ttf" type="css">

이 코드는 텍스트를 빨간색으로 변경하지만 글꼴은 적용하지 않습니다. 반대로 Times New Roman으로 전환됩니다. 나는 폴리머를 처음 접했을 때, 내가 빠진 것이 있는가?

출처

2017-05-05 RandomStranger

글쎄, 내 코드에서 나는 그것을하고있다 :'@import url ('https://fonts.googleapis.com/css?family=Montserrat:300,500,700');'그러나 나는 이것에 능하지 않다. 다른 사람들이 대답하게하십시오. 귀하의 경우에는 propably 다음과 같이해야합니다 : http://stackoverflow.com/questions/7961721/how-do-i-i-custom-font-on-an-html-site –

@ KubaŠimonovský 그 답변을 따라했습니다 , 그러나 그것은 일하지 않았다. 나는 더 많은 응답을 기다릴 것이다! – RandomStranger

@font-face을 사용하여 글꼴을 가져올 수 있습니다.

UPDATE :

당신은 @ 글꼴 얼굴을 가져 오기 위해 외부 문서를 사용하여 사용자 정의 요소 템플릿에 배치하지 않도록해야합니다. 그림자 루트의 일부 규칙은 Chrome에서 무시됩니다 (discussion 참조). Polymer 1을 사용할 때 문제는 아니지만 Polymer 2는이 점에서 브라우저 동작을 따르는 것 같습니다.

내가 @ 글꼴 얼굴 수입과 CSS 스타일 시트를 가지고 제안 :

@font-face { 
    font-family: "font-regular"; 
    src: url("./font-regular.ttf") format("truetype"); 
}

당신이 당신의 index.html을에서, "글꼴 - 일반"전 세계적으로 사용할 수 있음을 가져 오는 경우

. 또는 사용자 정의 요소에서만 스타일 시트를 가져올 수 있습니다.

출처

2017-05-06 09:23:40 vikdoro

이것은 나를 위해 작동하지 않는 것, 그것은 단지 새로운 로마 시대로 돌아 간다. 어떤 아이디어? – RandomStranger

글꼴이 콘솔에 404를 제공하지 않는지 확인 했습니까? 어쩌면 상대 경로가 잘못되었을 수도 있습니다. – Ergo

사실 내 제안은 Chrome의 Polymer 2에서 작동하지 않는 것 같습니다. 내 대답을 업데이트 할게. – vikdoro

폴리머에 사용자 정의 글꼴을 사용하는 방법

답변

관련 문제