css 中请求googleapis.com/css?family

本文介绍了解决因Bootstrap CSS文件引用Google服务器字体导致页面加载缓慢的方法。通过下载并保存字体文件到本地服务器,修改CSS文件中的字体路径,显著提高了网页加载速度。

Bootstrap.css 中请求googleapis.com/css?family 备忘录

问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");

     国内访问不稳定,页面反应慢

解决:将请求结果保存下来,放到本地,重新声明请求

1.请求http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700 得到css样式如下

image

将途中 URL 请求的四个文件重新请求下来,放到本地

 

image

URL 修改成文件中的位置

 

@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 400;

  src: local('Open Sans'), local('OpenSans'), url(../fonts/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');

}

@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 700;

  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../fonts/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');

}

@font-face {

  font-family: 'Open Sans';

  font-style: italic;

  font-weight: 400;

  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(../fonts/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');

}

@font-face {

  font-family: 'Open Sans';

  font-style: italic;

  font-weight: 700;

  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(../fonts/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');

}
转载路径:http://www.csdn123.com/html/itweb/20131106/208705.htm

<think>我们正在解决用户在引入Google Fonts字体链接时遇到的问题: 用户提供的链接:<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display;swap" rel="stylesheet"> 问题:实体display未被声明 分析: 在Google Fonts的链接中,通常使用`&display=swap`来指定字体的显示行为(swap表示使用备用字体直到自定义字体加载完成)。但在用户提供的链接中,写成了`&display;swap`,这里的分号`;`是错误的,应该是一个等号`=`。 正确的链接应该是: <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> 错误原因: 在HTML中,`&display;`会被解析为一个字符实体引用,但`display`并不是预定义的实体名,因此会导致解析错误(实体未声明)。 解决方案: 将`&display;swap`改为`&display=swap`。 修改后的代码行应该是: <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> 另外,参考引用[1][2][3]中提供的正确示例,都是使用`&display=swap`。 因此,我们只需要将链接中的分号改为等号即可。 同时,我们注意到用户提供的链接中,在`display;swap`部分,分号后面没有空格,所以整个参数变成了`display;swap`,这显然不是正确的参数传递方式。 修改后的完整代码行如下: </think>### 解决字体链接实体声明问题 您遇到的错误是由于Google Fonts链接参数语法错误导致的。问题出在这一行: ```html <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display;swap" rel="stylesheet"> ``` #### 问题分析 1. **错误语法**: - `&display;swap` 中的分号 `;` 是无效分隔符 - 正确参数应使用等号 `=` 连接键值对:`&display=swap` 2. **HTML实体解析**: - `&display;` 会被解析为HTML实体引用 - 由于`display`不是预定义实体名,触发"实体未声明"错误 3. **正确语法参考**: 根据引用[3]的规范示例: ```html <link href="https://fonts.googleapis.com/css2?family=Rubik...&display=swap" rel="stylesheet"> ``` #### 解决方案 修改为: ```html <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> ``` #### 优化建议 1. **添加preconnect预连接**(引用[2][3]推荐): ```html <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> ``` 2. **完整优化方案**: ```html <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> ``` #### 原理说明 - `display=swap` 确保文本始终可见(FOUT策略) - `preconnect` 提前建立TCP连接,加速字体加载 - `crossorigin` 属性保证CORS请求正确执行 - 参数分隔符必须使用 `&key=value` 格式 修改后,您的Inter字体将正常加载,且不会触发实体声明错误[^3]。 ### 相关问题 1. 如何通过CSS @font-face直接嵌入Google字体避免链接错误? 2. 除了`swap`,字体加载策略`block`和`fallback`有什么区别? 3. 如何检测网页中未正确加载的字体资源? 4. 使用Google Fonts时有哪些隐私合规要求需要考虑?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值