tpl文件中的Font-family

Question

我正在尝试从.tpl文件中更改包含在div中的UL中的字体系列。代码如下：

<div id="header" class="floatleft desktop_view ">
  {if !$checkoutPage}
        <div id="header_menu" >
            <ul>
                <li>{a module=MainPage}<img src="{url href='images/homepage.png'}" alt="Homepage" title="Home livrare flori Timisoara" />{/a}</li>
                <li>{a module=Frontend action=productsListPromotions}Promotii{/a}</li>
                <li><a rel="nofollow" href="{url module=Cms action=pageView page_id=10 seo_page_seo_title="livrare-si-plata"}"> Livrare si plata</a></li>
                {if !$mainPageDefaultAction}
                    <li><a rel="nofollow" href="http://blog.livrarefloritm.ro/"> Blog </a></li>
                {/if}
                <li class="last">{a module=Frontend action=static_contact}Contact{/a}</li>
            </ul>
            <div class="clearboth"></div>
        </div>

这是css。我不得不提一下，字体文件和css文件在同一个文件夹中。

#header_menu li{font-family: 'crescentregular';}
#header #header_menu {{font-family: 'crescentregular';display: block;position: absolute;right: 0;top: 0; z-index: 100;}
#header #header_menu ul li{ {font-family: 'crescentregular';border-right: 1px solid; float: left; margin-right: 10px; padding-right: 10px; height: 20px; line-height: 20px;}
#header #header_menu ul li.last{ border-right: none;}

问题是，这是行不通的。

Answer 1

如果您正在尝试使用自定义字体，则需要向您的css添加@font-face声明，例如：

@font-face {
  font-family: 'crescentregular';
  src: url('crescentregular.eot'); /* IE9 Compat Modes */
  src: url('crescentregular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('crescentregular.woff2') format('woff2'), /* Super Modern Browsers */
       url('crescentregular.woff') format('woff'), /* Pretty Modern Browsers */
       url('crescentregular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('crescentregular.svg#crescentregular') format('svg'); /* Legacy iOS */
}

只需将示例缩减为您已有的字体文件，您就应该没问题了。

希望这能有所帮助

Answer 2

您在CSS中使用了双{。试试这个：

#header_menu li {font-family: 'crescentregular';}
#header #header_menu {font-family: 'crescentregular';display: block;position: absolute;right: 0;top: 0; z-index: 100;}
#header #header_menu ul li {font-family: 'crescentregular';border-right: 1px solid; float: left; margin-right: 10px; padding-right: 10px; height: 20px; line-height: 20px;}
#header #header_menu ul li.last{ border-right: none;}

某些浏览器可能会遇到{{问题并忽略该规则。

希望这能有所帮助