#260 – The Concept of Fonts

A typeface is a set of glyphs in a particular style, used to render characters.  A typeface is also sometimes known as a font family.

In Windows, a font is a set of glyphs defined by the combination of a typeface, font weight and font style (or slope).

A font weight dictates the thickness of the characters and includes choices like:

  • Thin
  • Extra Light / Ultra Light
  • Light
  • Normal / Regular
  • Medium
  • Demi-Bold / Semi-Bold
  • Bold
  • Extra-Bold / Ultra-Bold
  • Black / Heavy
  • Extra-Black / Ultra-Black

A font style/slope dictates the angle that the glyphs are slanted includes choices:

  • Italic
  • Normal / Regular
  • Oblique

When we combine typeface, weight and style, we then end up with different fonts, for example:

  • Cambria Regular  (normal weight and style)
  • Cambria Bold  (normal style)
  • Cambria Bold Italic
  • Cambria Italic  (normal weight)

Samples of these fonts are shown below.

 

Advertisement

#242 – Drawing Text Using DrawGlyphRun

If you want an even lower-level mechanism for drawing text than provided by DrawingContext.DrawText, you can use DrawingContext.DrawGlyphRun.

DrawGlyphRun lets you draw text based on glyphs, which are individual characters within a font that typically represent a single character in a language.

Below is an example of rendering the word “Wow” using DrawGlyphRun, in a custom DrawingVisual.

    class MyDrawingVisual : DrawingVisual
    {
        public MyDrawingVisual()
        {
            using (DrawingContext dc = RenderOpen())
            {
                GlyphRun gr = new GlyphRun(
                    new GlyphTypeface(new Uri(@"C:\Windows\Fonts\BKANT.TTF")),
                    0,       // Bi-directional nesting level
                    false,   // isSideways
                    96,      // pt size
                    new ushort[] { 58, 82, 90 },   // glyphIndices
                    new Point(100.0, 100.0),           // baselineOrigin
                    new double[] { 80.0, 45.0, 0.0 },  // advanceWidths
                    null,    // glyphOffsets
                    null,    // characters
                    null,    // deviceFontName
                    null,    // clusterMap
                    null,    // caretStops
                    null);   // xmlLanguage

                // Draw the text at a location
                dc.DrawGlyphRun(Brushes.Black, gr);
            }
        }
    }

The glyphIndices parameter specifies a list of indexes into the font for the glyphs that are to be rendered.

#241 – Rendering Text Using DrawText

You can render text into a visual using the DrawText method of a DrawingContextDrawText renders text that is represented by an instance of FormattedText into the drawing context at a specified location.

Below is an example of drawing some text into a custom DrawingVisual.

    class MyDrawingVisual : DrawingVisual
    {
        public MyDrawingVisual()
        {
            using (DrawingContext dc = RenderOpen())
            {
                // Create formatted text--in a particular font at a particular size
                FormattedText ft = new FormattedText(
                    "When things are at their worst I find something always happens.",
                    CultureInfo.CurrentCulture,
                    FlowDirection.LeftToRight,
                    new Typeface(new FontFamily("Century"), FontStyles.Normal, FontWeights.Bold, FontStretches.Normal),
                    24,    // 36 pt type
                    Brushes.Black);

                // Draw the text at a location
                dc.DrawText(ft, new Point(10.0, 10.0));
            }
        }
    }

Once we host this DrawingVisual in an UIElement, we can see the text in a window: