如何在Carrd中通过@media查询调整自定义嵌入字体的字号？

兄弟我太懂你这种调样式调半天完全没反应的崩溃感了！我帮你捋捋问题出在哪——大概率是踩了两个小坑，再加上Carrd本身的样式优先级特性在搞鬼，咱们一步步来解决：

首先，你写的媒体查询里有个致命的语法错误：把max-width写成了max_width（得把下划线改成连字符才对！），CSS里的属性和媒体查询条件都是用连字符分隔的，这个小失误直接导致浏览器根本识别不了你的媒体查询规则，自然就会忽略它。

先给你修正后的代码，其实不用重复写那些不需要覆盖的属性（比如font-family和text-transform），只改要调整的字号就行：

.titletext {
  font-family: Vipnagorgialla;
  font-size: 6vw;
  text-transform: uppercase;
}

/* 这里把max_width改成了正确的max-width */
@media screen and (max-width: 600px) {
  .titletext {
    font-size: 10vw;
  }
}

接下来是Carrd特有的注意事项，这也是很多人容易踩的坑：

• 样式优先级问题：Carrd本身的内置组件样式优先级可能比你自定义的类选择器高。如果改了语法还是没效果，可以试试给选择器加个更具体的前缀（比如div.titletext），或者临时加个!important测试（比如font-size: 10vw !important;）——如果加了!important就生效了，那就是优先级的问题，这时候你可以把CSS放在Carrd的「Site Settings」→「Custom CSS」区域，这里的样式优先级会比单个Embed里的样式高。
• 自定义字体的加载时机：你说把所有样式放进媒体查询就丢了字体，这可能是字体引入的问题。要确保你已经在全局的head里用@font-face正确引入了Vipnagorgialla字体，而且引入代码要在所有样式规则之前，这样不管屏幕大小，字体都能正常加载。
• Embed组件的位置：如果你是在单个Embed组件里写的<style>标签，要确保这个Embed的「Position」设置没有冲突，而且组件本身没有被Carrd的其他样式覆盖。可以试试把全局样式统一放在Site Settings的Custom CSS里，而不是分散在各个Embed里。

最后再给你个测试小技巧：用浏览器的开发者工具（F12）选中你的标题文本，看看「Styles」面板里你的媒体查询规则有没有被划掉——如果划掉了，要么是语法错了，要么是优先级不够；如果根本看不到这个规则，那就是你的CSS没被正确加载到Carrd里。

内容来源于stack exchange