This page utilizes numeric style linking. The main advantage of this method is you can have up to 18 fonts in one family; weights 100 through 900 with italics. If an older IE browsers don't link the styles correctly, it often 'guesses' close enough to be acceptable.
Pros:
- Cleanest Markup.
- Considered the industry standard.
- Up to 18 fonts per family.
Cons:
- Results are less predictable in IE8 and lower.
Browser Support:
- Chrome: 100%.
- Safari: 100%.
- Firefox: 100%.
- Opera: 100%.
- IE9 and up: 100%.
- IE7 & IE8: very limited support.
Notes:
- Only 100-900 weights in increments of 100 are supported.
- Browsers interpret 400 as regular and 700 as bold if it is not specified.
- If no font is declared as 400, the browser take its best guess.
- You can also mix numeric methods with traditional styles. Use this demo to see what I mean.
array(
'font-family' => $family_name . ', ' .$default_font ,
'font-weight' => '100',
'font-style' => 'normal',
),
'font_name' => $font_name,
'syntax' => array(
'font-family' => $family_name,
' src' => 'url("...")',
'font-weight' => '100',
'font-style' => 'normal',
),
'flags' => array(
'regular' => 'no',
'bold' => 'no',
'italics' => 'no',
),
'tr_class' => 'weight100',
'font_class' => 'normal',
);
$table_content[] = array(
'code' => array(
'font-family' => $family_name . ', ' .$default_font ,
'font-weight' => '100',
'font-style' => 'italic',
),
'font_name' => $font_name,
'syntax' => array(
'font-family' => $family_name,
' src' => 'url("...")',
'font-weight' => '100',
'font-style' => 'italic',
),
'flags' => array(
'regular' => 'no',
'bold' => 'no',
'italics' => 'yes',
),
'tr_class' => 'weight100',
'font_class' => 'italic',
);
$table_content[] = array(
'code' => array(
'font-family' => $family_name . ', ' .$default_font ,
'font-weight' => '300',
'font-style' => 'normal',
),
'font_name' => $font_name,
'syntax' => array(
'font-family' => $family_name,
' src' => 'url("...")',
'font-weight' => '300',
'font-style' => 'normal',
),
'flags' => array(
'regular' => 'no',
'bold' => 'no',
'italics' => 'no',
),
'tr_class' => 'weight300',
);
$table_content[] = array(
'code' => array(
'font-family' => $family_name . ', ' .$default_font ,
'font-weight' => '300',
'font-style' => 'italic',
),
'font_name' => $font_name,
'syntax' => array(
'font-family' => $family_name,
' src' => 'url("...")',
'font-weight' => '300',
'font-style' => 'italic',
),
'flags' => array(
'regular' => 'no',
'bold' => 'no',
'italics' => 'yes',
),
'tr_class' => 'weight300',
'font_class' => 'italic',
);
$table_content[] = array(
'code' => array(
'font-family' => $family_name . ', ' .$default_font ,
'font-weight' => '400',
'font-style' => 'normal',
),
'font_name' => $font_name,
'syntax' => array(
'font-family' => $family_name,
' src' => 'url("...")',
'font-weight' => '400',
'font-style' => 'normal',
),
'flags' => array(
'regular' => 'yes',
'bold' => 'no',
'italics' => 'no',
),
'tr_class' => 'weight500',
);
$table_content[] = array(
'code' => array(
'font-family' => $family_name . ', ' .$default_font ,
'font-weight' => '400',
'font-style' => 'italic',
),
'font_name' => $font_name,
'syntax' => array(
'font-family' => $family_name,
' src' => 'url("...")',
'font-weight' => '400',
'font-style' => 'italic',
),
'flags' => array(
'regular' => 'yes',
'bold' => 'no',
'italics' => 'yes',
),
'tr_class' => 'weight500',
'font_class' => 'italic',
);
$table_content[] = array(
'code' => array(
'font-family' => $family_name . ', ' .$default_font ,
'font-weight' => '700',
'font-style' => 'normal',
),
'font_name' => $font_name,
'syntax' => array(
'font-family' => $family_name,
' src' => 'url("...")',
'font-weight' => '700',
'font-style' => 'normal',
),
'flags' => array(
'regular' => 'no',
'bold' => 'yes',
'italics' => 'no',
),
'tr_class' => 'weight700',
);
$table_content[] = array(
'code' => array(
'font-family' => $family_name . ', ' .$default_font ,
'font-weight' => '700',
'font-style' => 'italic',
),
'font_name' => $font_name,
'syntax' => array(
'font-family' => $family_name,
' src' => 'url("...")',
'font-weight' => '700',
'font-style' => 'italic',
),
'flags' => array(
'regular' => 'no',
'bold' => 'yes',
'italics' => 'yes',
),
'tr_class' => 'weight700',
'font_class' => 'italic',
);
$table_content[] = array(
'code' => array(
'font-family' => $family_name . ', ' .$default_font ,
'font-weight' => '900',
'font-style' => 'normal',
),
'font_name' => $font_name,
'syntax' => array(
'font-family' => $family_name,
' src' => 'url("...")',
'font-weight' => '900',
'font-style' => 'normal',
),
'flags' => array(
'regular' => 'no',
'bold' => 'yes',
'italics' => 'no',
),
'tr_class' => 'weight900',
);
$table_content[] = array(
'code' => array(
'font-family' => $family_name . ', ' .$default_font ,
'font-weight' => '900',
'font-style' => 'italic',
),
'font_name' => $font_name,
'syntax' => array(
'font-family' => $family_name,
' src' => 'url("...")',
'font-weight' => '900',
'font-style' => 'italic',
),
'flags' => array(
'regular' => 'no',
'bold' => 'yes',
'italics' => 'yes',
),
'tr_class' => 'weight900',
'font_class' => 'italic',
);
?>