zoukankan      html  css  js  c++  java
  • css3 自定义字体_使用@font-face方式实现个性化字体

    当我们在浏览一些网站时发现,里面含有一些十分个性的字体,这些字体并不是我们电脑上安装的字体。那么css是如何实现自定义字体的呢?

    在css3中可以通过@font-face模块,把自己定义的Web字体嵌入到你的网页,web设计师可以使用他们喜欢的任意字体,只需要把该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。

    资源网站大全https://55wd.com

    自定义字体标准格式:  

    @font-face {
        font-family: 'YourWebFontName';
        src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
        src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                 url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
                 url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
                 url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
        [font-weight: <weight>];
        [font-style: <style>];
    }

    说明:

    Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
    Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。
    注释:Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。 

  • 相关阅读:
    UNIX环境高级编程——信号说明列表
    [Fiddler]如何让Fiddler可以抓取https的请求
    [Cookie] Read Cookie and Pass in headers
    [Training Video
    [Training Video
    [Training Video
    [Training Video
    [Training Video
    [Training Video
    [Training Video
  • 原文地址:https://www.cnblogs.com/ypppt/p/13232558.html
Copyright © 2011-2022 走看看