fix(card): title styles being overridden by global typography

Fixes the card title styles potentially being overridden by the global `.mat-typography` styles if the title is set on a header node.

Fixes #10215.

Author: crisbeto

src/lib/card/_card-theme.scss

@@ -27,21 +27,22 @@
 @mixin mat-card-typography($config) {
   .mat-card {
     font-family: mat-font-family($config);
-  }
 
-  .mat-card-title {
-    font: {
-      size: mat-font-size($config, headline);
-      weight: mat-font-weight($config, title);
+    // These need the extra specificity, because they can be
+    // easily overridden by the global typography styles.
+    .mat-card-title {
+      font-size: mat-font-size($config, headline);
+      font-weight: mat-font-weight($config, headline);
+      line-height: normal;
     }
-  }
 
-  .mat-card-header .mat-card-title {
-    font-size: mat-font-size($config, title);
-  }
+    .mat-card-header .mat-card-title {
+      font-size: mat-font-size($config, title);
+    }
 
-  .mat-card-subtitle,
-  .mat-card-content {
-    font-size: mat-font-size($config, body-1);
+    .mat-card-subtitle,
+    .mat-card-content {
+      font-size: mat-font-size($config, body-1);
+    }
   }
 }

src/lib/card/card.scss

@@ -46,15 +46,20 @@ $mat-card-header-size: 40px !default;
   margin-bottom: 16px;
 }
 
-.mat-card-title {
-  display: block;
-  margin-bottom: 8px;
-}
+.mat-card {
+  // Needs slightly higher specificity due to it potentially
+  // being overridden by the global typography styles.
+  .mat-card-title {
+    display: block;
+    margin-bottom: 8px;
+  }
 
-.mat-card-subtitle, .mat-card-content {
-  @extend %mat-card-section-base;
+  .mat-card-subtitle, .mat-card-content {
+    @extend %mat-card-section-base;
+  }
 }
 
+
 .mat-card-actions {
   @extend %mat-card-section-base;
   margin-left: -$mat-card-padding / 2;