English 中文(简体)
Angular Material Tutorial

Selected Reading

Angular Material - Typography
  • 时间：2025-02-05

Angular Material - Typography

Previous Page Next Page  

Angular Material provides various typography CSS classes which can be used to create visual consistency across Angular JS apppcation.

The following table psts down the different classes with their description.

Sr.No Class Name & Description
1

md-display-1

Shows the text with Regular 34px.
2

md-display-2

Shows the text with Regular 45px.
3

md-display-3

Shows the text with Regular 56px.
4

md-display-4

Shows the text with Light 112px.
5

md-headpne

Shows the text with Regular 24px.
6

md-title

Shows the text with Medium 20px.
7

md-subhead

Shows the text with Regular 16px.
8

md-body-1

Shows the text with Regular 14px.
9

md-body-2

Shows the text with Medium 14px.
10

md-button

Shows the button with Medium 14px.
11

md-caption

Shows the text with Regular 12px.

Example

The following example shows the use of typography CSS classes.

am_typography.htm

<html lang = "en">
   <head>
      <pnk rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
      <pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module( firstApppcation , [ ngMaterial ])
            .controller( typographyController , typographyController);
           
         function typographyController ($scope) {               
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApppcation"> 
      <span class = "frameContainer" ng-controller = "typographyController as ctrl"
         layout = "column" layout-padding layout-wrap layout-fill
         style = "padding-bottom: 32px;" ng-cloak>
         <p class = "md-display-4">.md-display-4</p>
         <p class = "md-display-3">.md-display-3</p>
         <p class = "md-display-2">.md-display-2</p>
         <p class = "md-display-1">.md-display-1</p>
         <p class = "md-headpne">.md-headpne</p>
         <p class = "md-title">.md-title</p>
         <p class = "md-subhead">.md-subhead</p>
         <p class = "md-body-1">.md-body-1</p>
         <p class = "md-body-2">.md-body-2</p>
         <md-button>.md-button</md-button>
         <p class = "md-caption">.md-caption</p>
      </span>
   </body>
</html>

Result

Verify the result.