H5学习_番外篇_CSS3其他属性_html/css_WEB-ITnose

二维码.jpg

0.今日课程大纲

服务器端字体: font-face 轮廓: outline 缩放属性: resize 分栏布局: column 弹性布局: flex-box

1. 服务器端字体 font-face

我们在第三天CSS 样式中，学习了一个属性叫做 font-family,他的作用是定义你所使用的字体具体是哪一种，但是仅对有对应字体的电脑有效。例如常见的字体有宋体或者黑体等，这些我们的电脑一般系统自带的字体库中都会直接安装好。

但是我们假如想更改一下字体什么的？让我们的用户看到的字体和我们在自己电脑上设置的字体是一样的，那又该怎么做呢？

我们在这里介绍一个概念，就是服务器字体，属性为 @font-face。它的作用是能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。那具体该怎么实现？

首先，你需要在网上下载你所需要的字体文件库，放入你的 font（字体目录，根据自己电脑情况来） 目录中。

其次就是将下载的文件放入你的页面中，这时候也就要用到我们的属性 font-face了。

    @font-face{        font-family:“你的web字体名称”;        src:url(“字体路径”);        font-weight:bold;    } 

来看看具体实现过程。

                                 Document                  /*@font-face {            font-family: "唐菜也体";            src: url("fonts/FuturaBTLtIt.otf");        }        div{            font-family: "唐菜也体";            font-size: 50px;        }*/        @font-face{            font-family: "郜慧姣体";            src: url("fonts/FuturaBTHv.otf");        }        div{            font-family: "郜慧姣体";            font-size: 30px;        }                           
hello world!!

      
查看更多关于H5学习_番外篇_CSS3其他属性_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111528