需要帮助获取Web字体才能在模板中工作

时间:2016-06-12 22:14:53

标签: html css wordpress fonts

我有一个Wordpress的模板,我下载了它,它带有我认为难以阅读的(因为它是如此瘦)字体的h1和h2文本。它被称为Century Gothic。我的Mac上有一个字体,我宁愿使用它叫做Noteworthy。我使用在线转换将它从OTF转换为几种网络字体样式(eot,svg,ttf,woff)。转换装备也提供了一些代码。

问题是找不到Century-Gothic定义的地方所以我可以用Noteworthy代替它。我找到了它所属的所有实例

这是我在文件style.css中插入的代码。

h1, h2, h3, h4, h5 {
    font-family: Noteworthy;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noteworthy';
    src: url('fonts/Noteworthy.eot');
    src: url('fonts/Noteworthy.woff') format('woff'), url('fonts/Noteworthy.ttf') format('truetype'), url('fonts/Noteworthy.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    color: #750000;
}

这是一个在各种样式定义中使用的例子:

.post div h2 {
    margin: 5px 0 5px 0;
    padding: 0;
    font-size: 18px;
    font-family: Century-Gothic, Helvetica, Arial;
    color: #750000;
    font-weight: normal;
    font-style: normal;
}

我已经完成并用Noteworthy替换了所有这些实例但是当我刷新页面时,旧字体仍然存在。

此模板文件夹的顶层有一个名为Fonts的文件夹,其中包含值得注意的字体文件。

请注意我在这方面是一名新手,并且一直在尝试通过检查在线资源来学习,但这个确实让我感到困惑。

我网站的网址为http://scruffydog.org,您可以看到我正在谈论的一些内容。顶部的脚本(故事......)值得注意,但它是一个PNG。每个帖子中的标题(“Hello World”,“Note Post”等)主要是我想要解决的问题。

我正在使用Safari运行OS X 10.11.5的Mac Mini。

第二个问题与左边第三个帖子有关,标题是网址。我根本不知道如何改变那个!

任何提示或资源都将不胜感激。我也可以压缩css文件并通过电子邮件发送,如果这样会有所帮助。这并不着急,因为这只是一个老退休男人的爱好。

谢谢!

-Tod

1 个答案:

答案 0 :(得分:1)

如果您在此页面上查看完整源代码,则不会看到此代码。在Chrome中按Command + Shift + i并搜索hello,您将看到我在下面插入的内容。

您的主题是使用Cufon。这是一个javascript字体替换脚本。

你可以发表评论:

<script type="text/javascript" src="http://scruffydog.org/wp-content/themes/DailyNotes/js/cufon-yui.js"></script>

或禁用h *标记的字体替换。

<h2><cufon class="cufon cufon-canvas" alt="Hello " style="width: 49px;     
height: 18px;"><canvas width="64" height="19" style="width: 64px; 
height: 19px; top: -1px; left: -1px;"></canvas><cufontext>Hello   
</cufontext></cufon><cufon class="cufon cufon-canvas" alt="world!" 
style="width: 49px; height: 18px;"><canvas width="67" height="19" 
style="width: 67px; height: 19px; top: -1px; left: -1px;"></canvas>
<cufontext>world!</cufontext></cufon></h2>

如果使用更多字体,可能会导致问题。