前端新手遇到的问题 ---含“ 文字贯穿线、@font-face、axios ”知识

最新推荐文章于 2025-06-21 13:35:48 发布

原创最新推荐文章于 2025-06-21 13:35:48 发布 · 584 阅读

0 ·

CC 4.0 BY-SA版权

新手前端路专栏收录该内容

24 篇文章

订阅专栏

这篇博客解答了前端面试中的三个问题：1. 使用CSS的text-decoration属性和定位实现文字贯穿线；2. 解释了@font-face中加入local是为了优先使用本地字体，提高加载速度；3. 提到了axios发送多个并发请求的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题源自知乎—浪子神剑老师的前端面试每日 3+1，我仅在此为大家提供解题方案以及思路，在此感谢浪子神剑老师。

[html] 举例说明实现文字贯穿线的方法有哪些？
[css] 当使用@font-face的时候，为什么src中要加入local呢？
[js] axios如何一次发送多个并发请求？

问题一：[html] 举例说明实现文字贯穿线的方法有哪些？

方法一：使用CSS text-decoration 属性

效果：

方法二：利用定位或者漂浮效果

效果：

问题二：[css] 当使用@font-face的时候，为什么src中要加入local呢？

网上的说法片面不一，CSDN和掘金都没见到正确回复，然后我在MDN找到了比较明确的说法。

MDN的 @font-face 这是一个CSS @规则，它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。

`src`

远程字体文件位置的URL或者用户计算机上的字体名称，可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。如果找不到该字体，将会尝试其他来源，直到找到它。

代码：

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

用到了用户本地字体"Helvetica Neue Bold"的备份；如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过)，就会用下载的字体"MgOpenModernaBold.ttf"来代替。意味着加入local后，代码加载时会优先采用电脑资源，而不是从网络加载，这个可以加快加载速度，提升用户体验感。

问题三：[js] axios如何一次发送多个并发请求？

这个学习还不够深入

function getUserAccount(){
  return axios.get('/user/12345');
}
function getUserPermissions(){
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function(acct,perms){
    //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
  }))