Using Google fonts in HTML5 Canvas documents

Meklēšana
Adobe Animate Lietotāja rokasgrāmata
Attiecas uz: Adobe Animate

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

When you use desktop fonts to create and publish your web outputs, customer experience is not optimal. Animate introduces Google fonts that provide a consistent typographic experience across all form factors. Google fonts are free open source fonts served by Google servers. For more information on Google fonts and the original font designers, see https://fonts.google.com/about and https://fonts.google.com/attribution.

Advantages of using Google fonts are:

  • Caching: After an initial download, the fonts are stored in your local systems and you do not have to download them repeatedly. This loads the text faster.
  • Open source: They are freely available, and can be redistributed or modified based on your requirements.
  • Compatiblity: They work seamlessly with your advertising and web content.
  • Responsive: They provide a responsive content experience across all form factors for a consistent aesthetic appeal.

  1. Open your HTML5 Canvas document and select the Text tool in the Tools panel.

  2. In the Properties panel, select Dynamic Text. 

  3. Click the Add Web fonts icon and select Google Fonts.

    google_fonts_add
    Select Google fonts dialog box

  4. The Google fonts dialog box lists all the available web fonts. You can now select the font that best suits your design needs by browsing through fonts, searching for specific fonts, or filtering by font properties.

    • Search: Searches the font by names.
    • Category: Filters fonts based on the available categories.
    • Sort by: Sorts the fonts based on the following categories:
      • Popularity: Sorts based on the popular fonts.
      • Alphabet: Sorts an alphabetical list of fonts.
      • Date Added: Sorts based on the dates when they were added to the document.
      • Number of Styles: Sorts based on the number of styles available for each font family.
      • Trending: Sorts based on the trending font categories.
    • Help: Displays the online Help for Google fonts.
    • Cancel: Cancels the font selections.
    • Done: Adds the selected font to the document.
    2b
    Google fonts dialog box

  5. To add a font to the document, click the font that you want to use and select Done. A check mark indicates that the font is selected. 

    Piezīme.

    You can also select and add multiple fonts. 

  6. To view the added fonts in Animate CC, select Character > Family in Property Inspector.

    Selected Google font in the Family menu
    Selected Google font in the Property inspector

  7. In the Character Family drop-down list, select the added Google font to use in an HTML5 Canvas document.

    Webfonts-under-Font-menu
    Using the selected font in the document

See also