[Ionic] 커스텀 폰트(독자 폰트) 사용
이번에 사용하는 커스텀 폰트는 AA를 표시하기 위한 폰트(aahub 폰트)입니다.
방법
app.scss에 @font-face을 작성하십시오.
그렇게 하면, 커스텀 폰트를 font-family로 지정할 수 있게 됩니다.
소스 코드는 이하.
src/app/app.scss
@font-face {
font-family: 'aahub';
src: url("../assets/fonts/aahub");
}
소스 코드
src/pages/custom-font/custom-font.scss
.aa{
font-family: 'aahub';
}
<ion-header>
<ion-navbar>
<ion-title>custom-font</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>フォント:デフォルト</p>
<div>
∧_∧<br>
( ´∀`)<br>
( )<br>
| | |<br>
(__)_)<br>
</div>
<p>フォント:カスタム</p>
<div class="aa">
∧_∧<br>
( ´∀`)<br>
( )<br>
| | |<br>
(__)_)<br>
</div>
</ion-content>
※aahub는 이번에 작성한 독자적인 폰트의 이름입니다. 코피페 할 때는 다시 써 받을 수 있으면・・・.
소스 코드
위의 설정을 수행하면 사용자 정의 글꼴을 지정할 수 있습니다. 간단합니다.
결과는 다음과 같이 표시됩니다.
커스텀 폰트에서는 아스키 아트를 어긋나게 표시할 수 있습니다.
데모
전체에 적용하는 경우
전체 앱의 글꼴을 변경하려면 variables.scss에 다음을 추가하면 됩니다.
src/app/app.scss
@font-face {
font-family: 'aahub';
src: url("../assets/fonts/aahub");
}
src/theme/variables.scss
$font-family-md-base: "aahub";
$font-family-ios-base: "aahub";
$font-family-wp-base: "aahub";
Ionic CSS 덮어쓰기에 대한 공식 문서를 보면
공식 문서
요약
Ionic은 일반적인 WEB 글꼴과 같이 사용할 수 있으므로 간단합니다. 저도 자신의 웹 사이트에서 사용하고 있기 때문에 참고까지 ....
스마트폰 대응의 AA 뷰어
또, 그 외 AA 표시용 폰트를 알고 싶은 분은 이하의 사이트도 참고해 봐 주세요.
AAHub Fonts
Reference
이 문제에 관하여([Ionic] 커스텀 폰트(독자 폰트) 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/scrpgil/items/2a49832c6e1b25479f1d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여([Ionic] 커스텀 폰트(독자 폰트) 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/scrpgil/items/2a49832c6e1b25479f1d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)