Material angular - Tipografía

Angular Material proporciona varias clases CSS de tipografía que se pueden usar para crear consistencia visual en la aplicación Angular JS.

La siguiente tabla enumera las diferentes clases con su descripción.

No Señor Nombre y descripción de la clase
1

md-display-1

Muestra el texto con 34px normal.
2

md-display-2

Muestra el texto con 45px Regular.
3

md-display-3

Muestra el texto con 56px Regular.
4

md-display-4

Muestra el texto con Light 112px.
5

md-headline

Muestra el texto con 24px normal.
6

md-title

Muestra el texto con Medio 20px.
7

md-subhead

Muestra el texto con 16px normal.
8

md-body-1

Muestra el texto con 14px normal.
9

md-body-2

Muestra el texto con Medio 14px.
10

md-button

Muestra el botón con Medio 14px.
11

md-caption

Muestra el texto con 12px normal.

Ejemplo

El siguiente ejemplo muestra el uso de clases CSS de tipografía.

am_typography.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('typographyController', typographyController);
           
         function typographyController ($scope) {               
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div 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-headline">.md-headline</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>
      </div>
   </body>
</html>

Resultado

Verifique el resultado.