Including a .ttf Font in CSS: Comprehensive Guide
To incorporate a custom font into your web page, CSS utilizes the @font-face rule. However, simply including a .ttf file may not suffice for cross-browser compatibility.
Optimal Font File Combination
For optimal compatibility, it is recommended to use multiple font file formats:
<code class="css">@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }</code>
This code assumes you have .eot, .woff, .ttf, and svg font formats. To simplify the process, use a web font generator like Font Squirrel or Transfonter.
Modern Approach: WOFF Font Type
Modern browsers support the .woff font type. You can simplify your code to:
<code class="css">@font-face { font-family: 'MyWebFont'; src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */ }</code>
Additional Resources
The above is the detailed content of How to Include a .ttf Font in CSS for Optimal Cross-Browser Compatibility?. For more information, please follow other related articles on the PHP Chinese website!