远程设置字体

引用外部字体代码:

在css样式中插入下列代码

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

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

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

使用字体代码:

1. body{
2. font-family: "xxx";
3. }

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

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

1. @font-face {
2. font-family: 'ziti';font-style: normal;font-display: swap;src: url('../fonts/two.ttf');
3. }
4. body {
5. font-family: 'ziti';
6. }

下面是跨域使用方法:

如使用的是nginx:

在网址配置文件中添加

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

如使用的是Apache:

根目录 .htaccess 中添加

1. <FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
2. <IfModule mod_headers.c>
3. Header set Access-Control-Allow-Origin "*"
4. </IfModule>
5. </FilesMatch>

@font-face {
font-family: ‘xxx’;
font-style: normal;
font-display: swap;
src: url(‘../fonts/aaa.ttf’);
}
body {
font-family: ‘xxx’;
}