远程字体修改方法

引用外部字体代码:

在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)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

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

字体下载

温馨提示:

1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请联系站长处理!

2.如果您喜欢我们,可开通终身会员,享受全站资源免费下载!

3.本站所有内容只做学习和交流使用。 版权归原作者所有。

葵花宝典

B2首页列表文字前自定义图标

2021-12-23 15:21:30

略有小成

移动端图标快捷栏

2021-7-29 20:28:53

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧

点我打卡

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索