2

我正在尝试开发一个magento主题，我对所有其他事情都进行得很好，除了一个，我想根据我的客户要求在我的magento主题中使用自定义字体，字体是“eurostilebold”，我尝试过这样做核心php，就像我将字体文件放在字体文件夹中并将字体文件夹放入

D:\xampp\htdocs\clothing_site\skin\frontend\default\gwcc\

这个目录。现在我在我的css中使用那个字体系列并像这样调用：

@font-face {
font-family: 'eurostile_extended_2regular';
src: url('fonts/eurostile_extended_2-webfont.eot');

我想知道如何在magento中使用任何自定义下载的字体系列，任何帮助将不胜感激，在此先感谢，在此先感谢。

4

8 回答 8

2 
@font-face {
    font-family: 'Adobe Garamond Regular';

    src: url('../fonts/Adobe Garamond Regular.eot');
    src: url('../fonts/Adobe Garamond Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Adobe Garamond Regular.woff') format('woff'),
         url('../fonts/AGaramondPro-Regular.otf') format('otf'),
         url('../fonts/Adobe Garamond Regular.ttf') format('truetype'),
         url('../fonts/Adobe Garamond Regular.svg#Adobe Garamond Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{  font-family:'Adobe Garamond Regular';  } //added to code
于 2014-04-06T15:24:28.847 回答
2

要在您的网站上使用自定义字体，您有 3 个选项。

  1. 使用开源和免费的在线字体，如谷歌字体和松鼠字体，请在谷歌上搜索免费网络字体。我个人在我的设计中经常使用 open sans 和其他谷歌字体。

  2. 使用一些付费字体服务。（我没用过所以没有经验）

  3. 在您的网站上嵌入您的本地字体。方法如下：

您需要将字体转换为不同的格式，例如 .eot、.svg、.ttf、.woff，因为不同的浏览器支持不同的格式。http://screencast.com/t/0KV17zkSri然后，像这样在 CSS 中添加这些字体：http: //screencast.com/t/ypgKHV7lSm现在，使用这样的字体： http: //screencast.com/t /NheSnxPCE1SN

有几种在线服务可以将给定的格式转换为所有其他所需的格式，例如http://www.fontsquirrel.com/tools/webfont-generator。如果这些服务将您的字体列入黑名单，请尝试搜索特定格式，例如“ttf to eot”，您会在那里找到其他一些服务。

于 2013-03-22T13:23:03.740 回答
0

或者，只需安装此 Magento 扩展程序：http: //www.magentocommerce.com/magento-connect/googlefonts.html

它将让您从后端选择所需的字体并自行正确安装字体。然后，您只需通过 CSS 访问它。

于 2014-03-05T08:04:47.563 回答
0

您需要在其他 css 文件中引用您的 webfont：

body{
    font-family:"eurostile_extended_2regular",Arial, ... , ;
}

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

于 2013-03-22T13:05:05.837 回答
0

您需要下载字体，然后将其上传到 skin/frontend/default/your_theme/fonts，然后在您的 css 脚本的 @font-face 部分调用它，该脚本位于：skin/frontend/default/your_theme/ css/styles_your_layout.css

于 2014-07-16T23:03:19.423 回答
0

如果您制作自己的主题，在您的主题local.xml（应该放在app/design/frontend/{YOUR_PACKAGE}/{YOUR_THEME}/layout/）中，它可能看起来像（您的可能与下面不同）：

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addCss"><stylesheet>css/base.css</stylesheet></action>
        </reference>
    </default>
</layout>

<reference name="head">在该行之前添加以下链接addCss以确保它在之前加载base.css：

<action method="addLinkRel"><rel>stylesheet</rel><href>https://fonts.googleapis.com/css?family=Cardo:400,700</href></action>

变成：

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addLinkRel"><rel>stylesheet</rel><href>https://fonts.googleapis.com/css?family=Cardo:400,700</href></action>
            <action method="addCss"><stylesheet>css/base.css</stylesheet></action>
        </reference>
    </default>
</layout>

上传回您的主题文件夹。清除缓存并重新加载页面，您会看到 Google 字体 CSS 已添加到 HTML 的头部。

要使用 Google Web 字体（与这个问题有点题外话），您可以将字体应用于您想要的任何 CSS 选择器。例如：

p {
  font-family: Cardo, Arial, sans-serif;
}
于 2015-01-06T10:53:49.463 回答
0

我会首先通过fontsquirrel或其他服务转换我的字体。

这将使您成为一个 zip 文件夹，其中包含您需要的所有内容，包括字体文件和 css。

然后只需包含 css，现在您可以像这样在您的 css 中使用它，在您想要的任何元素上。

html {
    font-family: "eurostile", OtherFallbackFont;
}

或者只是标题：

h1 {
    font-family: "eurostile", OtherFallbackFont;
}
于 2013-03-22T13:15:00.110 回答
0

我发现最简单的方法是转到系统->配置

从 General 组转到 Design 并在 HTML Head 部分使用 Misc Scripts 粘贴如下内容：

<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<style> body {font-family: 'Raleway', sans-serif !Important;}</style>

所需的 google 字体的链接在哪里（为什么还需要其他字体？）

于 2015-09-23T19:29:09.413 回答