远程字体修改方法

引用外部字体代码:

在css样式中插入下列代码

@font-face{
     font-family: 'xxx';
font-style: normal;
font-display: swap;
     src: url('../font/aaa.woff') format('woff'),
}

注释: 其中font-family: ‘xxx’; 中的 xxx 字体名称(可随意命名,需要与使用时的名字保持一直)

src: url(‘../font/aaa.woff’) format(‘woff’), 其中aaa为字体文件名,woff为文件格式,有的可能是woff2,也可能是ttf.之类. url指的是调用的外部文件链接,可以是本地,可以是远程,如果是远程需要设置跨域,下面会给出方法.

使用字体代码:

body{
font-family: "xxx";
}

这里xxx需要与 font-family: ‘xxx’; 中一致.

body是全局设置,也可以单独某个标签使用.

例如本站使用的是:

@font-face {
	font-family: 'ziti';font-style: normal;font-display: swap;src: url('https://cdn.mrxu.net/fonts/two.ttf');
}
body {
	font-family: 'ziti';
}

下面是跨域使用方法:

如使用的是nginx:

在网址配置文件中添加

location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

如使用的是Apache:

根目录 .htaccess 中添加

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  
    Header set Access-Control-Allow-Origin "*"

字体可已去这个网址免费下载:

https://www.zitixiazai.cn/