开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

谷歌字体不适用于SCSS -字体家族编译在main.css文件中，但不包括在网站加载时

基础概念

谷歌字体（Google Fonts）是一组免费的开源字体，可以通过简单的链接标签集成到网页中。SCSS（Sassy CSS）是一种 CSS 预处理器，它允许使用变量、嵌套规则、混合、继承等功能来编写更简洁、可维护的 CSS 代码。

相关优势

谷歌字体：提供大量高质量的字体选择，易于集成到项目中。
SCSS：提高 CSS 的可维护性和可读性，支持变量和嵌套规则等高级功能。

类型

谷歌字体：多种字体风格和类型，如衬线体、无衬线体、手写体等。
SCSS：预处理器，生成标准的 CSS 文件。

应用场景

谷歌字体：适用于需要自定义字体的网站和应用程序。
SCSS：适用于大型项目和需要复杂样式管理的网站。

问题分析

如果谷歌字体不适用于 SCSS，并且字体家族没有正确编译到 main.css 文件中，可能是以下原因：

链接标签位置错误：确保在 HTML 文件的 <head> 标签内正确引入了谷歌字体链接。
SCSS 编译问题：确保 SCSS 文件正确编译为 CSS 文件，并且编译过程中包含了字体相关的样式。
路径问题：确保字体文件的路径正确，特别是在使用相对路径时。

解决方法

检查 HTML 文件：确保在 HTML 文件的 <head> 标签内正确引入了谷歌字体链接。例如：
检查 HTML 文件：确保在 HTML 文件的 <head> 标签内正确引入了谷歌字体链接。例如：
检查 SCSS 文件：确保在 SCSS 文件中正确引入了字体样式。例如：
检查 SCSS 文件：确保在 SCSS 文件中正确引入了字体样式。例如：
编译 SCSS 文件：确保使用正确的工具（如 Node-sass 或 Dart Sass）将 SCSS 文件编译为 CSS 文件。例如，使用 Node-sass：
编译 SCSS 文件：确保使用正确的工具（如 Node-sass 或 Dart Sass）将 SCSS 文件编译为 CSS 文件。例如，使用 Node-sass：
检查路径：确保字体文件的路径正确。如果使用相对路径，确保路径相对于 HTML 文件的位置是正确的。

示例代码

假设你有一个 main.scss 文件和一个 index.html 文件：

main.scss：

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="dist/styles/main.css">
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

参考链接

通过以上步骤，你应该能够解决谷歌字体不适用于 SCSS 的问题，并确保字体家族正确编译到 main.css 文件中。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

使用CSS提高网站性能的30种方法

它们最常用于JavaScript评估，但也可以在应用CSS时识别CPU和布局峰值。...可以使用以下工具生成字体子集字体松鼠或指定所需的字符谷歌字体例如，加载"OpenReplay"的Oswald字体字符： <link href="https://fonts.googleapis.com/...您还应该在CSS<em>中</em>定义适当的<em>字体</em>显示<em>加载</em>选项。以下选项可提供明显的性能提升：互换：使用第一个备用OS<em>字体</em>，直到Web<em>字体</em>可用。...您可以<em>在</em>开发过程中使用任意数量的<em>文件</em>，但是要使用构建步骤来捆绑和缩小到单个样式表<em>中</em>。<em>包括</em>Sass预处理器或PostCSS导入插件在内的工具可以<em>在</em>一个命令<em>中</em>完成这项艰巨的工作。...不应将其应<em>用于</em>太多的元素或在页面<em>加载</em><em>时</em>立即启动动画。给予浏览器一点<em>时</em>间进行优化。 22. @transkey_groupall~trans HTTP协议保存-数据标题指示用户已请求缩减的数据。

3.4K2 0

webpack介绍、配置、使用

loader用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。...在 plugin 中能够介入到整个 webpack 编译的生命周期，Plugins用于解决 loader 无法实现的其他事情，也就是说loader是预处理文件，那plugin 就是后处理文件。 Ⅰ..../css/main.css'); 在终端中输入 webpack命令进行css文件打包 5、实现SCSS打包在src目录中新建 sass目录–> scss1.scss // scss1.scss文件 $.../css/main.css'); // 4、获取sass目录中的scss1.scss文件 require('.....html-webpack-plugin 简单创建 HTML 文件，用于服务器访问，其中包括使用script标签的body中的所有webpack包。

2.6K1 0

前端主题切换方案详解

前端主题切换方案现在我们经常可以看到一些网站会有类似暗黑模式/白天模式的主题切换功能，效果也是十分炫酷，在平时的开发场景中也有越来越多这样的需求，这里大致罗列一些常见的主题切换方案并分析其优劣...表现效果如下：网络请求如下：优点：实现了按需加载，提高了首屏加载时的性能缺点：动态加载样式文件，如果文件过大网络情况不佳的情况下可能会有加载延迟，导致样式切换不流畅如果主题样式表内定义不当...编译后同样也是将所有包含的样式全部加载：这种方案最后得到的结果与方案2类似，只是在定义主题时由于是直接操作的SCSS变量，会更加灵活。...优点：不用重新加载样式文件，在样式切换时不会有卡顿在需要切换主题的地方利用mixin混合绑定变量即可，不存在优先级问题新增或修改主题方便灵活，仅需新增或修改SCSS变量即可，经过编译后会将所有主题全部编译出来...优点：不用重新加载样式文件，在样式切换时不会有卡顿仔细琢磨可以发现其原理跟方案4利用Vue3的新特性v-bind是一致的，只不过此方案只在:root上动态更改CSS变量而Vue3中会将CSS变量绑定到任何依赖该变量的节点上

7073 1

前端入门23-CSS预处理器（Less&Sass）声明正文-CSS预处理（less&Sass）

文件的后面，因为 less.js 文件加载成功后就会去将 less 转成 css 标准样式，在标签后面才用 link 标签引入的那些 less 文件就无法被转换了。...，将 main.less 文件编译输出 main.css；还有其他高级的用法，比如顺便压缩 css 文件，输出 .min.css 文件等等。...，但不能用于组合选择器中。...运算 less 允许在代码中进行一些简单的加、减、乘、除基本运算，结合变量的使用，可进行一些字体、颜色等的动态运算效果。...install sass 安装完 Sass 后，就可以通过 scss 命令来进行转换工作了，如： scss main.scss main.css 上述命令中，scss 换成 sass 也可以，但注意，

1.6K3 0

webpack5基础

1.为什么需要打包工具我们在开发时一般使用框架，vue，react，es6模块化，scss等，这样的代码要想在浏览器运行必须转成浏览器识别的js，css才能运行，所以这时候就需要webpack了。...，在文件夹下创建index.css,在main.js中引入import "....，在文件夹下创建index.scss,在main.js中引入import "....filename: "static/media/[hash:10][ext][query]", }, }, 处理其他资源如视频音频，excel，word 在处理字体字体图标资源的对象里再加一些资源...(__dirname, "public/index.html") }), ], 开发服务器和自动化开发服务器不会输出资源，在内存中编译打包安装webpack-dev-server npm install

2222 0

多网站项目的 CSS 架构

我在互联网行业的第四份工作，是在我国一家领先的媒体新闻公司中任职一名 CSS/HTML 专家，我的主要职责就是开发可重用的、可扩展的、用于多网站的 CSS 架构。 ?...基础层要保持轻量，其中只包含 CSS 初始化、基本的 SASS mixins、通用图标、通用字体（如需）以及功能类，如果某些网格布局适用于所有网站，就将其作为通用网格添加到基础层中。...在每一层中，都要保证只编译 layer-name.scss 文件，即使某些层代表的是一个“虚拟项目”（如上面示例图中的“基础层框架”）。...对于不会被编译成单独文件的私有文件，我们用一个下划线（ _）作为其文件名的前缀。这里的下划线代表着此文件不能单独存在。注意：当导入私有文件时，我们书写其文件名时可以不必带上前缀下划线。...（网站 = 层 = 项目）充分利用 IDE 快捷方式。选用一款便于重构的编辑器，免于导致报错或故障。立新不可破旧。在开发和后续重构中，每次都要把所有 Sass 根文件一同编译，以免新旧脱节。

1.6K3 0

Fonts最佳实践

因此，字体加载的最佳实践通常侧重于确保字体尽可能早地被加载。对于从第三方网站加载的字体应特别注意，因为下载这些字体文件需要单独的连接设置。...[post20image1.png] 内联字体声明大多数网站都可以在主文档的中内联字体声明和其他关键样式，而不是将其纳入外部样式表。...unicode-range通常用于根据页面内容使用的语言提供不同的字体文件。 unicode-range经常与子集技术一起使用。一个子集字体包括原始字体文件中所包含的一小部分字形（即字符）。...用于生成字体子集的工具包括 subfont 和 glyphanger。关于Google Fonts如何实现字体子集的信息，请看这个介绍。...一个字体家族是由样式组成的，这些样式是字体的特殊变化（例如，浅色、中色或粗斜体）。一个字体文件包含一个单一的样式，除非它是一个可变字体。

2.9K7 2

手把手教你使用scss

w=713&h=75&e=png&b=191919" alt="image.png" /> 在main.scss文件中编写的所有SCSS代码将会被编译到/dist/css文件夹中的main.css...我们稍后会在文章中更详细地介绍局部文件。在SCSS中使用混合（Mixins）混合（Mixin）是一种用于将一组CSS属性和规则封装在一个可重用的代码块中的特性。...中的局部文件（Partials）如何工作在SCSS中，局部文件是一种用于将样式代码模块化和组织化的技术。...例如，_variables.scss 可能包含与颜色和字体相关的样式：导入局部文件：要将局部文件中的样式包含到主SCSS文件中，你可以使用 @import 指令，不需要包含下划线和扩展名。...当你导入一个局部文件时，在导入语句中不需要包含 _ 或 . scss。

6842 0

给初学者的Gulp教程（译）

所以让我们在app/scss文件夹中创建一个styles.scss文件。这个文件将会被加入到sass任务中的gulp.src中。...有时我们需要能够编译多个.scss文件成CSS文件。我们可以在Node globs的帮助下完成（globs参数是文件匹配模式，类似正则表达式,用来匹配文件路径包括文件名）。....pipe(gulp.dest('app/css')) }) 其他在app/scss文件夹下找到的Sass文件，将自动被包括到sass任务中。...这儿有多个文件夹，我们需要从app文件夹编译到dist文件夹中，比如字体文件夹。让我们来做这件事。将字体文件夹赋值到Dist文件夹由于字体文件已经压缩了，所以我们不需要做额外的事。...第一个任务集是一个开发进程，我们可以用它编译Sass到CSS，监视文件的修改，从而重新加载浏览器。第二个任务集是压缩进程，我们为生产网站准备了所有文件。

4.3K2 0

HTTP 新增的 103 状态码，这次终于派上用场了！

因为浏览器需要先把 HTML 页面加载回来，才能知道下一步去加载哪些 JavaScript、CSS 或字体文件等。...有没有办法在等待 HTML 响应的同时就去提前把重要的静态资源文件也加载回来呢？...利用 HTTP 103 状态码，就可以让服务器在服务器处理主资源的同时向浏览器发送一些关键子资源（JavaScript、CSS 或字体文件）或页面可能使用的其他来源的提示。...大部分情况下只会包括一个 Root 节点，以及一些资源的 Link，大部分逻辑和加载时间其实都在打包后的 JavaScript 中。...在 103 响应中，会包括相关的预连接和预加载提示。主页面准备好后，再按照正常的响应进行响应。

7211 0

【腾讯云前端性能优化大赛】秒开的艺术：Hexo 博客首屏耗时优化实践

这部分字体样式不是页面展示所必须的，因此可以尝试让浏览器延迟加载该 CSS 样式文件，具体的做法如下：向 link 标签增加 media 属性，值为 only x（这个值在浏览器的媒体查询中与当前页面不匹配...Hexo 博客中一些进行内容渲染的 JS 脚本不是在页面加载时必须立即执行的（比如用于渲染评论区的 JS），除了通过上述方法避免阻塞页面渲染以外，也可以在访客即将看到它之前才开始加载，即按需加载。...如果我们通过完整的字体文件向访客分发中文字体是很不现实的，因为一个完整的中文字体包括上千甚至上万个字符，也就是说字体文件的尺寸起码是 MB 级别的，一个字体文件完整下载下来的耗时会很长很长。...Google Fonts 将字体切分为多个文件，浏览器在渲染页面时按需下载对应的字体文件，而不是将全部字体文件都下载下来。...我们可以只将页面需要用到的文字从完整的字体文件中裁剪出来，生成字体的子集（subset），从而优化字体的加载和展示体验。

93414 1

仅需 5 分钟，快速优化 Web 性能的10 个手段

在这篇文章中，主要介绍10种快速提高网站性能的方法，你只需5分钟内就可以将它应用到你的网站上，废话不多说，让我们进入正题吧 ?。 1. 文件压缩文件压缩，可以减少网络传输的字节数。有几种压缩算法。...这样可以在将来浏览器请求资源时提供更快的响应。如果正确使用了预拉取，那么用户在从当前页面前往下一个页面时，可以很快得到响应。...preload 是用于预加载当前页的资源，浏览器会优先加载它们 prefetch 是用于预加载后续导航使用的资源，浏览器也会加载它们，但优先级不高 9....固定好你的谷歌字体 Google字体很棒，它们提供优质的服务，并被广泛使用。如果你不想自己托管字体，那么Google字体是一个不错的选择。...总结在这篇文章中，展示了 10 种快速的网络性能，你可以在5分钟内应用到你的网站，以提高你的网站速度。感谢大家的观看与支持，我们下期再见，不要忘了三连哦。

7192 0

零基础学网页开发入门（制作博客案例）适应手机端div+css+js的综合介绍

win7系统下组织---文件夹和搜索选项---查看---去掉勾（隐藏已知文件类型的扩展名） win10系统下可以直接到查看菜单下显示隐藏的扩展名在操作系统中不同的文件扩展名有不同的表现形式。...在浏览器中访问网页，在本质上其实就是访问一个文件。每个服务器上的网站服务，默认情况下把index为文件名的文件作为一张网页的首页。...DOCTYPE html>这个代码出现在html文件的第一行。规定了这个文档时html格式的，可以让浏览器按照html5的方式进行解释。...通过使用谷歌浏览器右键“查看源代码”。或者审查元素（检查）。 html5中的文档规范： <!...： css文件要在html文件中链接才能有效果，链接代码举例： 2.作用 css

1.3K3 0

前端换肤的N种方案，请收下

（包括任意的sassscript表达式 arbitrary SassScript expressions）和Lists一样Maps主要为sassscript函数服务，如 map-get函数用于查找键值...，map-merge函数用于map和新加的键值融合，@each命令可添加样式到一个map中的每个键值对。...Maps可用于任何Lists可用的地方，在List函数中 Map会被自动转换为List ，如 (key1: value1, key2: value2)会被List函数转换为 key1 value1,...注：使用less 来实现换肤要注意 less 文件在 html 中编写的位置，不然很可能被其他css 文件所干扰导致换肤失败。如果less文件特别大，会存在编译性能问题。...通过引入所有图片，并用文件名来区分不同主题所对应的图片。在点击切换主题时，切换到主题所对应的文件，就能实现图片切换了。

2.2K2 0

英文字体的选择 - 腾讯ISUX

英文字体的分类英文文字大致分成三类，衬线体，无衬线体和其他字体。其他字体包括哥特体，手写体和装饰体，这些字体在我们工作中使用相对较少，所以重点介绍衬线体和无衬线体两大类。 ?...发丝衬线体是现代体中常见的字型，具有明显现代感，不适合磅值小的字体。比较常见字体有Didot，Bodoni。板状衬线体比较有力，是19世纪到20世纪初用在广告牌上的文字，多用于标题，具有怀旧气氛。...Geometric字体趋近几何形状，例如字母O非常像正圆，字母a是半圆加一个尾巴，易读性不好所以不适合用在正文，但是这类字体有非常强的设计感。在某些需要突出设计感的场合用磅值大的字体效果很好。...具有史诗般正统风格，特别适合用于表现年代悠久。具体排版时注意合字和老式数字的使用。 ? ?...很多字体家族是同时包含称衬线体和无衬线体的，它们在设计初始的时候就有相同的骨架，所以排版起来非常协调。

2.6K5 0

英文字体的选择

英文字体的分类英文文字大致分成三类，衬线体，无衬线体和其他字体。其他字体包括哥特体，手写体和装饰体，这些字体在我们工作中使用相对较少，所以重点介绍衬线体和无衬线体两大类。 ?...发丝衬线体是现代体中常见的字型，具有明显现代感，不适合磅值小的字体。比较常见字体有Didot，Bodoni。板状衬线体比较有力，是19世纪到20世纪初用在广告牌上的文字，多用于标题，具有怀旧气氛。...Geometric字体趋近几何形状，例如字母O非常像正圆，字母a是半圆加一个尾巴，易读性不好所以不适合用在正文，但是这类字体有非常强的设计感。在某些需要突出设计感的场合用磅值大的字体效果很好。...具有史诗般正统风格，特别适合用于表现年代悠久。具体排版时注意合字和老式数字的使用。 ? ?...很多字体家族是同时包含称衬线体和无衬线体的，它们在设计初始的时候就有相同的骨架，所以排版起来非常协调。

3.2K3 0

浏览器之性能指标-CLS

❞ 当使用Web字体时，浏览器在下载字体文件时，会显示一段时间的空白文本，直到字体文件完全加载完成。这段时间内，用户可能会看到页面上出现了空白文本，然后突然闪现出字体样式。这种体验被称为FOIT。...❞ 与FOIT类似，当使用Web字体时，浏览器可能会先显示系统默认字体，然后在字体文件加载完成后，突然将文本样式化为所需的Web字体。这种体验被称为FOUT。...该评分考虑了多个指标，包括CLS、FCP和LCP。在这个测试中，我们选择了一个没有明显CLS的网站。...排除主要图片的懒加载通过懒加载，我们可以优化页面的加载并减少启动时的负担。然而，主要图片可能不适合懒加载，特别是如果它在视窗顶部明显显示，因为这种技术可能不是这些元素的最佳解决方案。...为广告预留空间我们的网站是否显示第三方广告？网站上最常见的做法是在加载期间或加载后动态添加广告内容。在页面的其余部分继续加载时，非广告内容可能会对用户可见。

8442 0

我们从Vue到Alpine.js的旅程

理论上来说，我们是支持谷歌将这些新指标纳入评分标准的，尽管谷歌在展示“优秀范例”时用的是几乎没有任何交互性的博客站点，这完全是在拿苹果和橘子在作比较。...我们通过谷歌 Chrome 浏览器和其内置的 Lighthouse 应用，外加开发者工具中的性能标签，三管齐下分析网站性能。...我们测试了预加载和预连接的各种不同组合，并最终得出了以下结果：预加载关键资源，如 CCM 脚本预连接 GTM 预加载我们自己的关键资源，如网页字体或我们自己的主要 css、js 文件这些是我们用到的工具...运行时构建的文件大小相比来说要小很多，但只能用于单一文件的组件，因为这类组件会被包含在捆绑包中，因此不需要模板编译器。...如果不包含脚本的话，预计我们的网站是不可能达到 56 的评分，但这是我们现在的结果：再次声明，这只是我们的开发环境，因此很多图中的“机会”并不适用于实际生产环境。

9373 0

基于 Taro 的微信小程序开发实战：如何支持高亮代码块

在 types/global.d.ts 中，新增 md 文件的配置即可解决该问题。...3、设置编译时复制 wemark 目录。...3 按需加载微信小程序对包体积有严格的限制。这样处理之后，包体积可能会有点大。字体文件有接近 200k，remark 也不小。...因此，我们可以把自定义字体的样式写在 wemark.wxss 中，然后将该组件设置为按需引入，那么在小程序启动时，就可以不用加载该组件。微信小程序目前已经支持了按需引入。...web 上能使用的方案也能运用于小程序中，但是由于微信小程序对打包体积有限制，因此，功能验证成功之后，要多考虑这方面的问题。

3291 0

webpack教程：如何从头开始设置 webpack 5

将 JS 编译为浏览器可以理解的版本导入样式并将 SCSS 编译为 CSS 导入图像和字体（可选）设置React或Vue Babel (JavaScript) Babel是一个工具，可让使用最新的...现在很多人都在使用CSS-in-JS、styled-components和其他工具来将样式引入到他们的 JS 应用程序中。当网站只有一个 CSS 文件，仅能够加载一个CSS文件就足够了。...我想使用这三种方法——在Sass中编写，在PostCSS中处理，以及编译到CSS。这需要引入一些加载器和依赖项。...sass-loader — 加载 SCSS 并编译为CSS node-sass — Node Sass postcss-loader — 使用 PostCSS 处理 CSS css-loader...为此可以为 webpack 设置两种配置：生产配置，用于最小化，优化和删除所有源映射开发配置，该配置在服务器中运行webpack，每次更改都会更新，并具有源映射开发模式下是在内存中运行所有内容，而不是构建一个

2.2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭