web前端引用外部字体

最新推荐文章于 2024-05-25 16:50:19 发布

计算机小白一个

最新推荐文章于 2024-05-25 16:50:19 发布

阅读量515

点赞数 10

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2301_77523055/article/details/137755792

版权

基于visual studio code软件

浏览器的默认字体是有限的，有时候，我们需要使用特别的字体，这时，我们可以引入外部字体。

语法格式如下：

@font-face{

font-family:<YourWebFontName>;

sre:<source>[<format>][,<source>[<format>]]*;

[font-weight:<weight>];

[font-style:<style>];

}

YourWebFontName自定义的字体名称，将被引用到font-family。

source:此值指定的是自定义的字体的存放路径，可以是相对路径也可以是绝对路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: ziTi1;
            src: url(字体/ziTi1.ttf);
        }
        p{
            font-family: ziTi1;
            font-size: 50px;
            text-align: center;
            color: aqua;
        }
    </style>
</head>
<body>
        <p>今夕何夕兮，搴舟中流。</p>
      <p>  今日何日兮，得与流子同舟。</p>
      <p>  蒙羞被好兮，不訾诟耻。</p>
      <p>  心几烦而不绝兮，得知流子。</p>
      <p>  山有木兮木有枝，心悦君兮君不知。</p>
</body>
</html>

或者：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'ziTi1';/*英文可以用单引号也可以不用，中文的用单引号*/
            src: url(字体/ziTi1.ttf);
        }
        p{
            font-family: 'ziTi1';
            font-size: 50px;
            text-align: center;
            color: aqua;
        }
    </style>
</head>
<body>
        <p>今夕何夕兮，搴舟中流。</p>
      <p>  今日何日兮，得与流子同舟。</p>
      <p>  蒙羞被好兮，不訾诟耻。</p>
      <p>  心几烦而不绝兮，得知流子。</p>
      <p>  山有木兮木有枝，心悦君兮君不知。</p>
</body>
</html>