大卡特尔 - 产品页面字体类型 [英] Big Cartel - Product Page Font Type

问题描述

以下是该网站的链接... http://johnathonpowers.bigcartel.com/ 。尝试更改产品页面的字体类型/面/风格。

所以我尝试了一切似乎。在我的大卡特尔的CSS领域，我经历了产品，产品，产品页面等各种字体的提及，并改变了所有字体的字体大小。我改变了大小，以便快速了解它们究竟影响了什么。只有产品标题和价格才能查明代码。他们中的许多人似乎都没有改变，即使我每次把字体放到50以便轻松注意到变化。

因此，我试图将我的产品页面字体类型改为calibri以匹配我的常见问题页面（我在周末花了几个小时创建的）......非常高兴与其结果。对于常见问题解答，我开始使用calibri，然后进行备份（我认为）在字体样式中添加serif。

无论如何，任何帮助或援助表示赞赏。非常感谢。

解决方案

您可以通过在CSS底部添加以下内容来更改页面中每个元素的字体：

  * {
 font-family：'Calibri'！important;请注意，访问者只会看到以该字体显示的文本，如果他们将它安装在他们的计算机上，因此包含一些回退将是明智的。否则，您可以使用单独的webfont服务嵌入字体。
 
 
 
利用浏览器的开发人员工具也是一个好主意，因此您可以检查您的元素页面并查看哪些CSS规则可以控制其外观。使用开发人员工具，您可以看到如下所示的内容：
  .page_header.product_header h1 {
 font-size：24px; 
 text-transform：大写; 
} 
  
我不建议直接在样式表中修改CSS类在底部添加新的规则 - 这样，如果主题不断更新，您可以复制并备份您的代码更改，还原为主题默认值，然后重新粘贴它们以进行自定义。
 
Here is a link to the site...http://johnathonpowers.bigcartel.com/. Trying to change the font type/face/style for the product pages. 

So I tried what seems like everything. In my CSS area of big cartel, I went through and found every mention of font for "product", "products", "product page", etc and changed the font size on all of them. I changed the size in order to quickly see what exactly they were affecting. Only the product titles and prices could I pinpoint the code for. Many of them seemed to change nothing even when I put fonts up to 50 each time to easily notice the change.  

So I am trying to get my product pages font type to calibri in order to match my FAQ page (which I spent hours creating over the weekend)...pretty happy with its outcome. For the FAQ I started using calibri and then a backup (I think) where I add ", serif" to the font style. 

Anyway, any help or assistance is appreciated. Thanks so much. 
解决方案
You can change the font on every element in your page by adding this at the very bottom of your CSS:
* {
  font-family: 'Calibri' !important;
}
Keep in mind that your visitors will only see text displayed in this font if they have it installed on their computer, so it would be wise to include some fallbacks. Otherwise you could embed the font using a separate webfont service.

It would also be a good idea to take advantage of your browser's developer tools, so you can inspect elements on your pages and see what CSS rules are in control of their appearance. With the developer tools you'll be able to see stuff like the following:
.page_header.product_header h1 {
  font-size: 24px;
  text-transform: uppercase;
}
Instead of modifying the CSS classes directly in your stylesheet, I would also recommend always adding new rules to the bottom - this way if the theme is ever updated, you can copy and back up your code changes, revert to the theme defaults, and then paste them back in to have your customizations in place.

                        
这篇关于大卡特尔 - 产品页面字体类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！