The idea for this post came from a web site that I am developing. The owner of the site said "Times New Roman has been done to death" and wanted something different as the font in the header of the site.
While Silverlight now supports any fonts which are on the computer that the site is being viewed with there is no guarantee that the font I chose will be installed on all computers.
I could embed the font into the silverlight .xap file then call the font as a Resource. This was not my first choice since it would make the size of the .xap larger which is not ideal.
The second option was to create a path which looked like the Font and user that for the header. Since the header was the only place I was going to use the different font going with the path made more sense.
For this example I am going to work in Expression Blend 4 due to the fact that it has some built in tools which Visual Studio 2010 does not have.
The following screenshot gives you an idea of what I was aiming towards for the site. Something a little more fancy than what is normally seen.
Setting up the Project
Oddly enough you start out by adding a TextBlock to your project and make it large enough to hold the text that you want.
You can see in the screenshot that I have only set the Text, Font and FontSize for the textblock, but you can set any of the font attributes you want.
The textblock now looks as it should but the problem of using an unsupported font still exists.
Making the Path
Creating the Path is just two clicks away.
Make sure that you have the textblock selected in the "Objects and Timeline" panel.
Then go to the "Objects" option from the main menu of Blend, move down to "Path" then over to "Convert to Path".
Clicking on "Convert to Path" starts Blend doing its magic and when done you notice that the Element in the "Objects and Timeline" panel has changed from a TextBlock to a Path.
Looking at the XAML you see the Blend has created all the data for the Path as well as setting the Fill.
As a little side note here, the reason for using Blend for this type of work can be seen in the next screen shot. The XAML below is just the path data for the "S" and would have taken who knows how long to have figured out if I tried to hand code it and that was if I could have figured it out at all.
Enhancing the Path
Now that I am working with a path I can add attributes to make it stand out a little more.
In this example I have changed the fill from black to a two colour LinearGradient Brush as well as giving it a two pixel wide gray stroke.
Note:
The foreground of the textblock could have been set to the gradient brush prior to converting it to a path. I just chose to make the alteration after conversion.
Running the Project
When the project is now run I get the look of the fancier with the benefits of not having to bloat the .xap file size by embedding the font or worry if the person viewing the site has the same font installed on their system or not.
0 comments:
Post a Comment