퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 리소스
  4. 아이콘 폰트 가져오기

아이콘 폰트 가져오기

Font Awesome과 같은 아이콘 글꼴은 문자 대신 벡터 아이콘이 포함된 특수 글꼴입니다. MultiDensityImageSource를 사용하지 않고도 선명한 아이콘을 제공합니다.

아이콘 글꼴 가져오기

아이콘 글꼴은 다른 글꼴과 똑같이 작동합니다. 이것을 사용하려면 다음과 같이 Font 요소를 만들어야 합니다:

1
<Font File="assets/fontawesome-webfont.ttf" ux:Global="FontAwesome" />

이 작업을 수행하면 Font의 전역 이름이 무엇이든 Font를 설정하여 모든 컴포넌트의 글꼴을 사용할 수 있습니다. 이 경우는 FontAwesome이 됩니다.

아이콘 글꼴 사용하기

아이콘 글꼴은 특수 유니코드 문자를 사용하기 때문에 이스케이프 된 문자 리터럴을 사용해야 합니다. 이들은 JavaScript와 UX에서 다르게 이스케이프 처리됩니다.

UX

UX에서는 보통 xml에서와 같이 유니코드 리터럴을 이스케이프 처리합니다. 이 예제는 FontAwesome의 톱니 바퀴(cog icon) 아이콘을 포함하는 텍스트를 보여줍니다:

1
<Text Font="FontAwesome">&#xf013;</Text>

이 글꼴의 전역 이름(FontAwesome)에 유의하십시오.

JavaScript

JavaScript에는 두 가지 경우가 있습니다. 사용하고자 하는 문자 코드가 65536 이하일 경우(또는 4자리 16진수로 작성될 수 있는 경우) 다음과 같이 이스케이프 처리할 수 있습니다:

1
var cog = '\uF013';

그러나 문자 코드가 65535보다 높으면 문자에 대해 UCS-2 인코딩을 사용하는 JavaScript 때문에 각 문자가 16비트 와이드라는 의미에서 약간의 해결책을 강구해야 합니다. 이러한 경우를 처리하는 트릭은 대리 쌍(surrogate pairs)입니다. 여기에서 서로 변환하는 방법을 포함하여 대리 쌍에 대해 더 많이 배울 수 있습니다.

캐릭터를 JavaScript 측에서 문자열로 이스케이프하면 UX에서 데이터 바인딩과 같이 사용할 수 있습니다:

1
2
3
4
5
6
7
8
<JavaScript>
    var Observable = require("FuseJS/Observable")
    var cog = Observable('\uF013');
    module.exports = {
        cog: cog
    };
</JavaScript>
<Text Value="{cog}" Font="FontAwesome"/>
Was this article helpful to you? Yes No

How can we help?