[WP 8.1 Development] how to insert custom fonts into Applications

Source: Internet
Author: User
Tags file url silverlight

Perhaps the font provided by the system is insufficient to reflect the charm of the application, especially for Chinese characters with strong performance. At this time, we will think, if we can put the art fonts downloaded from the Internet into the app package, isn't it beautiful? So, can this be implemented? The answer is yes.

Next, we will show you how to embed custom fonts in the two development frameworks of WP 8.1.

Why are the two frameworks? We know that the development framework from 7X to 8.0 is Silverlight for Windows Phone. To facilitate compatibility and direct project upgrade, Microsoft's Development Team retains this framework in 8.1; another Framework is an API set transplanted from the win RT application. I don't need to talk about it. I guess it is easy to write and prepare general applications for Windows tablet applications.

Of course, if you only want to develop WP applications, you can use both frameworks. It doesn't matter which one you can use easily. If you plan to write General programs, you can only select the Runtime API set, that is, the subset transplanted from the RT application.

However, I tell you that no matter which framework it is, there is no essential difference. At least it is the same. Many Development Technologies of Microsoft come from WPF later, saving a good continuity, as long as you learn WPF, other frameworks will not be able to pass through.

In short, remember my sentence:Technology and knowledge will always die, and people will always live. Do not learn knowledge to death..

 

Runtime API

First, let's see how to embed custom fonts in the Runtime API. This is quite simple.

1. Open universal Vs and create a new project. Select "Blank application (Windows Phone)" as the project template )", any template that specifies "Windows Phone" in parentheses is based on the Runtime API transplanted from Rt ..

 

2. Open the "solution Resource Manager" window (do not ask where I am), right-click the Project Name node, select "add"-"existing items" from the pop-up menu and select a font file. The font can be downloaded online.

3. Open mainpage. on the XAML page, declare a textblock element, select the textblock In The XAML Editor, open the Properties window, find the fontfamily attribute, and click the drop-down list, you will see the font file you just added to the project.

Note: The a symbol is added to the right of the Custom font added to the project. The following XAML is generated:

<Textblock fontfamily = "simplified. TTF # yuweij "......

You do not need to write the URL by yourself. We can see that the method for referencing the font file is "File URL + # + font name ". # The font name follows.
4. Get it done. Now, put some text in textblock.

<Textblock fontfamily = "simplified Yu Wei calligraphy line book. TTF # yuweij "fontsize =" 50 "> the Yellow Crane Tower <linebreak/> Cui Yi <linebreak/> has traveled by Huang He. <linebreak/> the Yellow Crane Tower is available here. <Linebreak/> the Yellow Crane is always gone, and <linebreak/> the White Cloud is far away. <Linebreak/> Qingchuan uses the Hanyang tree and <linebreak/> fangcaojiao parrot state. <Linebreak/> where is the location of sunmuxiang? <linebreak/>. </Textblock>

Now you can run it. Check the application page and find that the temperament has immediately increased to nine levels?

 

Silverlight framework

The Sl framework can also embed fonts, which is similar to the above.

1. Create a new project. The project template is "Windows Phone Silverlight". "Windows Phone Silverlight" is specified in brackets for any project template using the SL framework ".

Select version 8.1.

 

2. Open the Solution Explorer window, right-click the project node, and select "add"-"existing items" from the pop-up menu to add the Custom font file.

3. Open the mainpage homepage, declare a textblock element, select it in The XAML editor, and open the attribute window. Find the fontfamily attribute and select the font you just added from the drop-down list.

At this time, the generated XAML also shows us the URL format:

<Textblock fontfamily = "/custfontfamilyyml; component/YU Wei simplified calligraphy series. TTF # yuweij"/>

The format is also "Font File URL + # + font name ".

4. Now, you can place some text in the textblock to try it out.

<Textblock fontfamily = "/custfontfamilyyml; component/YU Wei simplified calligraphy line book. TTF # yuweij "fontsize =" 50 "> autumn wind and rain evening <linebreak/> the autumn flowers are pale and the autumn grass is yellow, and <linebreak/> the autumn light is long. <Linebreak/> the autumn window is full. <linebreak/> It is cool and miserable. <Linebreak/> ...... <Linebreak/> the candle in tears shake a short margin, and <linebreak/> hold your worries and hate your feelings. <Linebreak/> who has no wind in the autumn school? <Linebreak/> no rain in the autumn window. <Linebreak/> ...... <Linebreak/> I don't know how long it will take to take a break. <linebreak/> I have taught you how to shed tears on Windows. </Textblock>


 

Then, we can run it. Let's see the result.

It is estimated that someone has already scolded me for being a liar. Why can't I see a Custom font after running it?

Don't worry, don't worry, calm is a fortune, don't worry. End the debugging project, open solution Resource Manager, find the font file you just added to the project, select it, open the Properties window, and change "generate operation" to resource.

Now you can run it again.

You see, how can I lie to you if I am so honest?

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.