반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- js
- decodeURIComponent
- for ... in
- 부자의 그릇
- window.onload
- 투포인터
- 택배 배달과 수거하기
- fontweight
- woff2
- 2023 KAKAO BLIND RECRUITMENT
- 1권 1진리
- 요격 시스템
- 2023 카카오 블라인드 채용
- 연속된 부분 수열의 합
- custom font
- 프로그래머스
- 알고리즘
- 저는 이 독서법으로 연봉 3억이 되었습니다.
- 내성적인 건물주
- css
- DOMContentLoaded
- for ... of
- react native
- TypeScript
- 코딩테스트
- keypress
- level2
- 리코쳇 로봇
- keyup
- 이즈미 마사토
Archives
- Today
- Total
스카이코의 세상
[React-Native] 폰트가 안드로이드에서 적용되지 않을 때 본문
반응형
이전 포스팅을 통해 React Native에서 폰트를 적용하는 방법을 알아보았습니다.
import { StyleSheet, Text } from 'react-native';
export default function CustomFont() {
return (
<Text style={styles.text}>
안녕하세요 스카이코 입니다.
</Text>
);
}
const styles = StyleSheet.create({
text: {
fontFamily: 'Pretendard',
fontWeight: 700
},
});
하지만 위와 같이 fontWeight를 사용했을 때 iOS에서는 정상적으로 폰트가 적용되지만 Android에서는 폰트가 적용되지 않습니다.
이럴 때는 fontWeight를 사용하지 않고 @/asset/fonts에 넣은 폰트 파일 이름으로 fontFamily를 지정해주면 iOS와 Android 둘 다 모두 weight에 맞는 폰트를 적용시킬 수 있습니다.
import { StyleSheet, Text } from 'react-native';
export default function CustomFont() {
return (
<Text style={styles.text}>
안녕하세요 스카이코 입니다.
</Text>
);
}
const styles = StyleSheet.create({
text: {
fontFamily: 'Pretendard-Bold', // fontWeight 제거 후 fontFamily를 파일 이름으로 지정
},
});
반응형
'IT > React Native' 카테고리의 다른 글
[React Native] 폰트(Custom Font) 적용하기 (2) | 2023.02.17 |
---|
Comments