zoukankan      html  css  js  c++  java
  • Making “@fontface” Cross Browser Compatible

    @Font-face is a CSS3 property that allows you to embed any font and use it on your website. It was actually introduced with CSS2, but only supported by Internet Explorer with EOT (Embedded Open Type) font files.

    Nowadays “@font-face” can be used on all major browsers, but you will need to follow this easy process.

    Support

    Process

    One thing you must keep in mind before following this process is that many fonts are licensed, and you must buy them to obtain the rights to use them. Please do not use a licensed font if you haven’t purchased it.

    You can find hundreds of downloadable free fonts on the web to use on your website.

    First, you need to convert your font file and generate files with all the different extensions. For this you can use several tools; in this particular example we will use a tool provided here:


    Click on “Add Fonts”

    Browse for the font file on your file system


    Once your font completes the upload, click the “Download Your Kit” button.

    Extract the file contents to any folder you want. You should have the following files:


    Now you need to declare the font on your project’s CSS. Open the stylesheet.css file with any editor. You will see that all the required styles are provided. Copy those styles to your project’s CSS.


    Copy all the font files generated (.eot, .woff, .ttf, .svg) to whatever directory you want on your project and make sure that the paths to the font files are correct.

    Once you’ve done this, you’re ready to use your new font cross-browser. Just use any CSS selector and apply the “font-family” property. Use the exact same name as the declaration.

    It is also a good idea to provide fall back content in case the browser does not support this property. In this particular case we have 3 fallback options: the first is “Helvetica”, the second “Arial”, and the third is “sans-serif”.

    Conclusion

    The desired cross-browser @font-face CAN be achieved! It will require some effort, but it’s totally worth it and you’ll be very happy with the results.

    My only recommendation is to be sure that the font you picked is 100% readable, and that you won’t harm the user’s experience.

    Enjoy!

    天空一片蔚蓝,我却原地徘徊.
  • 相关阅读:
    (元)黄公望---富春山居图(中国十大传世名画之八) 高清图下载
    Bloom Filter 原理与应用
    开始我的 JNI 入门吧
    javaScript的使用
    hash定义
    POJ3169 Layout(差分约束系统)
    青蛙的约会
    POJ 3414 Pots ( BFS , 打印路径 )
    你真的理解Java的this和super吗?
    十款优秀的在线JavaScript工具介绍
  • 原文地址:https://www.cnblogs.com/abner/p/3161309.html
Copyright © 2011-2022 走看看