[WPF] 글꼴 패키징

👨‍🏫 튜토리얼, 팁, 강좌
1

안녕하세요.
이전에 제가 "WPF FontFamily 이용한 글꼴설정"이라는 질문을 올렸습니다.
정확히는 글꼴 패키징에 대한 글이였다고 생각합니다.
(글꼴을 어떻게 박스에 싸고 원하는 방법으로 찾아오는 것에 대한…)

저는 마이크로소프트 문서를 보면 이해하고 적용하는데 시간이 많이 걸립니다.
그래서 솔루션을 바로 찾으려고 검색을 많이 하게되는데요. :smile:
샘플코드도 없고 딱히 마음에 드는 솔루션도 없고해서
이번 기회에 문서를 참조하여 공부했습니다.

메인은 콘텐츠와 리소스로 글꼴을 추가하는 방법입니다.

<ItemGroup>
   <Content Include="./Resource/Vanisha.ttf" />     <!-- 콘텐츠로 추가 --> <!-- "./Resource/Vanisha.ttf" => 글꼴파일 경로 -->
   <Resource Include="Resource/Vanisha.ttf" /> <!-- 리소스로 추가 -->
</ItemGroup>

"./"를 생략해도 경로설정에 문제는 없습니다.

<TextBlock FontFamily="./Resource/#Vanisha" Text="Ex) 1" />
<TextBlock FontFamily="#Vanisha" Text="Ex) 2" />
<TextBlock FontFamily="Vanisha" Text="Ex) 3"  />

글꼴을 참조해 줍니다.
앞에 "./Resource/#"을 다 빼버리고 "Vanisha"만 사용하셔도 글꼴은 적용됩니다.

여기서 호기심이 생겨서 여러가지를 시도 했습니다.
과연 Visual Studio는 경로를 어디까지 관대하게 봐줄 수 있는지 궁금하더군요

<ResourceDictionary ... >
    <FontFamily x:Key="FontXaml1">pack://application:,,,/Fonts/#How Lovely</FontFamily> 
    <FontFamily x:Key="FontXaml2">/Resource/#orange juice</FontFamily>
    <FontFamily x:Key="FontXaml3">#가비아 솔미체</FontFamily>
</ResourceDictionary>

리소스 사전을 생성하고 위에 코드를 추가시 모두 경로 설정에는 문제가 없었습니다.

Hide

<!-- MainWindow.xaml -->
<Window.Resources>
        <FontFamily x:Key="Windowxaml4" >Lato Thin ltaic</FontFamily>  <!-- 글꼴 추가 -->
</Window.Resources>
 ...  
<TextBlock FontFamily="{StaticResource Windowxaml4}" Text="폰트경로 암시적 표현"  />

이 코드를 사용하고 폰트 파일을 폴더에 싸서 숨겨 보았습니다만
(폰트 경로 : Pages/…/Lato-Thinltalic.ttf)

글꼴은 잘 적용됩니다. (한번씩 코드 작성한 뒤 글씨가 크고 진하게 나옵니다.;; )

디자이너에서는 글꼴이 적용되는데 반해 디버깅시 글꼴이 적용이 안되는 오류가 있었습니다.

다지인디버깅비교
왼쪽이 디자이너, 오른쪽이 디버깅 사진입니다. (사진이 좀 어지럽네요 :sweat:)
이 경우 .csproj에 컨텐츠 or 리소스 방식으로 글꼴을 추가해주면 잘 적용이 되더군요.

여기서 재미있는건 예외적으로 <window.Resource>로 글꼴을 추가하는 방법 등등…에서는
따로 .csproj에 추가하지않아도 오류가 안났습니다.

이 것으로 보아 Window.Resource에 글꼴을 추가하는 방법이 안정감이 좋네요.
(가독성은 바닥입니다만…)

긴글이 되어서 깃허브 주소를 남깁니다.

Github : [깃허브 주소]

(테스트에 사용한 예제와 설명이 들어있습니다)

이 두부분은 이해가 안되더군요.

1. 동일한 애플리케이션 하위 디렉터리에서 글꼴 참조

<ItemGroup>  
  <Page Include="pages\HomePage.xaml" />  
</ItemGroup>  
<ItemGroup>  
  <Resource Include="pages\Peric.ttf" />  
  <Resource Include="pages\Pericl.ttf" />  
</ItemGroup>

2.글꼴 리소스 라이브러리 만들기

<PropertyGroup>  
  <AssemblyName>FontLibrary</AssemblyName>  
  <OutputType>library</OutputType>  
  ...  
</PropertyGroup>  
...
<ItemGroup>  
  <Resource Include="Kooten.ttf" />  
  <Resource Include="Pesca.ttf" />  
</ItemGroup>


<!-- MainWindow.xaml -->
<Run FontFamily="/FontLibrary;Component/#Kootenay" FontSize="36">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ
</Run>

스크린샷

스크린샷1

스크린샷2

아직 완벽하게 정리는 안되었고 계속 부족한 부분을 채워 나갈 계획입니다.
감사합니다

참조 : 문서

9개의 좋아요
2

@Stupid 좋은 글 감사합니다!
두고두고 볼 수 있는 내용 같아요.

저도 필요했는데 적용해보고 알려드릴게요. :smile:

3개의 좋아요
3

이번에 이 부분을 테스트하게 되어 댓글 남깁니다.

<Run FontFamily="/FontLibrary;Component/#Kootenay" FontSize="36">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ
</Run>

이전에 테스트 했을 시 이 코드만 사용하면 오류가나서,
Run으로 시작하는 문을 테스트 못 했습니다.

<TextBlock>
     <Run FontFamily="/FontLibrary;Component/Fonts/#Vanisha" FontSize="36" >ABCDEFGHIJKLMNOPQRSTUVWXYZ</Run>
</TextBlock>

TextBlock 사이에 Run을 넣으면 잘 실행이 되네요.

단순히 Component뒤에 폰트경로를 Ex) “/#Vanisha” 이렇게 설정하면 글꼴 적용이 되질 않습니다.
폰트를 포함한 폴더까지 같이 경로로 설정해야 적용이 됩니다(Ex => “/Fonts/#Vanisha” )

FontFamily=“/FontLibrary;Component/Fonts/#Vanisha” => “/@AssemblyName;Component/폰트 전체경로”

+++

글꼴 리소스 라이브러리 만들기

<!-- .csproj -->
<PropertyGroup>  
  <AssemblyName>FontLibrary</AssemblyName>  <!-- 리소스 라이브러리 이름 설정 -->
  <OutputType>library</OutputType>  
  ...  
</PropertyGroup>  
...
<ItemGroup>  
  <Resource Include="Kooten.ttf" />   <!-- 폰트 추가 -->
  <Resource Include="Pesca.ttf" />  
</ItemGroup>
4개의 좋아요