js学习-服务器端字体和@font-face属性

在页面上显示服务器端的字体

在CSS3中可以使用@font-face属性来利用服务端字体
使用方法:
@font-face{
font-family: webfont;
src: url( ‘xxx.otf’ ); / url( ‘xxx.ttf’ ); / url( ‘xxx.eot’ );
}


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在页面上显示服务器端的字体title>
    <style>
        @font-face {
            font-family: webfont;
            src: url(qtgg.otf);
        }
        @font-face {
            font-family: webfont;
            font-style: italic; /*斜体字体,font-style: 文本样式,分为italic(斜体)、oblique(倾斜体)、inherit(从父元素继承)、normal(不使用斜体)*/
            src: url(jpzk.otf);
        }

        h1{
            font-family: webfont;
        }
        h2{
            font-family: webfont;
            font-style: italic;  /*斜体字体*/
        }
         style>
head>
<body>
<h1>在页面上显示服务器端的字体h1>
<h1>HELLO HTML5 CSS3h1>
body>
html>

显示结果:
js学习-服务器端字体和@font-face属性_第1张图片
可以显示客户端本地的字体:


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在页面上显示服务器端的字体title>
    <style>
        ace{
            font-family:Arial;  /*本地字体*/
            src:local('Arial'); /*使用本地字体的方式*/
        }
        h1{
             font-family: Arial;
             /*font-weight是文本的粗细,bold(粗体)、bolder(更粗)、lighter(更细)*/
             font-weight: lighter; 
             /*font-size是文字字体大小*/
             font-size: 10px;
        }
        h1.bold{
            font-weight:  bold;
            font-size: 30px;
        }
        h1.bolder{
            font-weight:  bolder;
            font-size: 50px;
        }
        /*font-stretch是文本是否横向的拉伸变形*/
    style>
head>
<body>
<h1>在页面上显示服务器端的字体h1>
<h1>Hello Html5  Css3h1>
<h1 class=" bold">Hello Html5  Css3h1>
<h1 class=" bolder">Hello Html5  Css3h1>
body>
html>

显示结果:
js学习-服务器端字体和@font-face属性_第2张图片

  h1{
            font-family: Arial;
            font-variant: small-caps;
            /*font-variant:文本是否为大小写,small-caps(小型大写字母)、inherited(从父元素继承)*/
        }

显示结果:
js学习-服务器端字体和@font-face属性_第3张图片

你可能感兴趣的:(js学习,javascript)