HELIX3 FRAMEWORK教程

Helix3教程

如何添加新的字体到Helix3模板(Helix3教程)

如果您不想在“版式”部分使用字体兼泉铁,也不想使用默认的Helvetica Neue兼泉铁,Helvetica或Arial字体兼泉铁,则还可以自行加载字体礼马差。例如兼泉铁,您可以集成MyFonts.com兼泉铁,fontspring.com兼泉铁,transfonter.org或fontsquirrel.com中的自定义字体兼泉铁,或者使用WebFonts Generator礼马差。请确保您下载@ font-face Kit礼马差。

网络字体发生器

如何添加新的字体到Helix3模板(Helix3教程)

所有你需要做的是复制和粘贴字体文件兼泉铁,并对你的custom.css文件进行一些编辑礼马差。在这个例子中兼泉铁,我们将解释如何添加自定义的免费字体AlexBrush到你的JoomShaper模板礼马差。这个方法可以用于任何基于Helix3框架的模板礼马差。

  1. 请将模板包中的所有字体文件(.eot兼泉铁,.woff兼泉铁,.ttf兼泉铁,.svg解压缩到模板中保存其他字体的相同模板文件夹中兼泉铁,例如:templates \ shaper_helix3 \ fonts 
    如何添加新的字体到Helix3模板(Helix3教程)
  2. 现在打开stylesheet.css兼泉铁,它应该在生成的字体包中兼泉铁,在我的例子中它看起来像这样:
    @ font-face { 
        font-family:"alex_brushregular";
        src:url("alexbrush-regular-webfont.woff2")格式("woff2")兼泉铁,
             url("alexbrush-regular-webfont.woff")格式("woff")兼泉铁,
             url("alexbrush-regular-webfont.ttf ")格式("truetype");
        font-weight:正常;
        font-style:normal;
    }
  3. 但是我们需要改变文件的路径兼泉铁,我建议使用下面的改变(../fonts/):
     @ font-face { 
        font-family:"alex_brushregular";
        src:url(" ../fonts/ alexbrush-regular-webfont.woff2")格式("woff2")兼泉铁,
             url(" ../ fonts/ alexbrush-regular-webfont.woff")格式("woff")兼泉铁,
             url(" ../fonts/ alexbrush-regular-webfont.ttf")格式("truetype");
        font-weight:正常;
        font-style:normal;
    }
  4. 现在在/ css文件夹(JoomShaper模板)中打开或创建一个custom.css文件兼泉铁,并在那里复制更新的代码礼马差。
  5. 将字体添加到模板的字体目录后兼泉铁,就可以将其应用到您的新葡京在线礼马差。现在兼泉铁,您必须为选定的CSS选择器或HTML标记选择这个新的字体兼泉铁,也在custom.css文件中兼泉铁,例如:
    h1兼泉铁,h2兼泉铁,h3 {font-family:"alex_brushregular"兼泉铁,Arial; }
  6. 请记住兼泉铁,要从“Typography”选项卡(helix3)中禁用字体兼泉铁,以替换您想要使用自定义字体的那些选定的HTML标记礼马差。 
     如何添加新的字体到Helix3模板(Helix3教程)
  7. 您也可以使用您的首选字体和大小替换默认的字体颜色和字体大小兼泉铁,也可以使用基本的CSS规则礼马差。
  8. 如果您想为HTML标签或菜单项等使用自定义字体兼泉铁,请在“Typography”选项卡(!)中关闭(禁用)字体礼马差。

在前端的最终结果

 Helix3模板

说点什么...
取消
你是一个访客 ( 注册 ? )
作为一个访客
加载评论... 注释将在之后刷新 00:00.

第一个发表评论

joomlass-logo31.png

Search