在服务器上加载字体 [英] Load font at the server

查看：75
本文介绍了在服务器上加载字体的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

大家好，



我使用的是asp.net mvc 5应用程序



我尝试在服务器端加载一个字体，我使用的字体是：TrendSans-Five。



我有一个主要的css - 像这样的Site.css：



 @ font-face 
 {
 font-family：TrendSans-Five; 
 src：url（'  ../ fonts / TrendSans-Five.otf'）; 
 src：url（'  ../ fonts / TrendSans-Five.otf'）格式（'  embedded-opentype'）; 
 src：url（'  ../ fonts / TrendSans-Five.eot'）; 
 src：url（'  ../ fonts / TrendSans-Five.woff'）; 
 src：url（'  ../ fonts / TrendSans-Five.ttf'）格式（'  truetype'）; 
  / *   src：local（TrendSans-Five），url（../ fonts / TrendSans-Five。 otf）格式（'opentype'）; * /  
}





在webconfig中我声明了它像这样：



 <   staticContent  >  
 <   remove     fileExtension   =  。woff    /  >  
 <   mimeMap     fileExtension   = 。woff    mimeType   =  application / x-font-woff    /  >  
 <  删除    fileExtension   = 。ttf    /  >  
 <   mimeMap     fileExtension   = < span class =code-keyword>。ttf    mimeType   =  font / truetype    /  >  
 <  删除    fileExtension   = 。otf    /  >  
 <  < span class =code-leadattribute> mimeMap     fileExtension   = 。otf    mimeType   =  font / openty pe    /  >  
 <  删除    fileExtension   = 。eot    /  >  
 <   mimeMap     fileExtension   = 。    mimeType   =  application / vnd.ms -fontobject    /  >  
 <   / staticContent  >







本地它工作正常 - 看到正确的字体



该网站是： http：// www .lolacyclingclub.org / [ ^ ]



我在Font文件夹中的字体为：TrendSans-Five.otf。



那么如何解决这个问题，你可以在服务器上看到正确的字体？



谢谢你们都

解决方案

你的CSS中有几个错误。



首先，你有一个在你的一个CSS文件中迷路 \9 ，导致缩小失败：

  / *  缩小失败。返回未经授权的内容。 
（2815,5）：运行时错误CSS1035：预期冒号，找到'}'
 * /  
 ... 
。 radio  input [type =radio] ,.  radio-inline  input [type =radio] ,. 复选框输入[type =checkbox] ,.  checkbox-inline 输入[type =checkbox] {
  position  ： 绝对值;  
  margin-left  ：  -20px;  
  margin-top  ：  4px;  \ $ 
}





其次，你已经定义了一个名为 TrendSans-Five ，但你已告诉正文并使用font-fam标题我称之为 Trend Sans Five 。姓氏必须完全相同。

  body  {
  font-family  ： Trend Sans Five;  
  font-size  ：  10px;  
  line-height  ：  1.42857143;  
  / *  颜色：＃888888; * /  
  background-color  ： ＃060606;  
 } 
 ... 
  h1 ， h2 ， h3 ， h4 ， h 5 ， h6 ，。 h1 ，。 h2 ，。 h3 ，。 h4 ，。 h5 ，。 h6  {
  font-family  ： Trend Sans Five;  
  font-weight  ：  500;  
  line-height  ：  1.1;  
  color  ：  #ffffff;  
} 
 ... 
  @ font-face  
 {
  font-family  ：  TrendSans-Five;  
  src  ：  url（'../ fonts / TrendSans-Five.otf'）;  
 < span class =code-attribute> src  ：  url（'../ fonts / TrendSans-Five .otf'）格式（'embedded-opentype'）;  
  src  ：  url（'../ fonts / TrendSans-Five.eot'）;  
  src  ：  url（'../ fonts / TrendSans-Five.woff'）;  
 < span class =code-attribute> src  ：  url（'../ fonts / TrendSans-Five .ttf'）格式（'truetype'）;  
  / *   src：local（TrendSans -Five），url（../ fonts / TrendSans-Five .otf）格式（'opentype'）; * /  
}





编辑：适合我的字体mime-types是：

 <  配置 >  
 <   system.webServer  >  
 <   staticContent  >  
 <   mimeMap     fileExtension   =  svg    mimeType   =  image / svg + xml    /  >  
 <   mimeMap     fileExtension   =  eot    mimeType   =  application / vnd.ms -fontobject    /  >  
 <   mimeMap     fileExtension   =  otf    mimeType   =  application / x-font-opentype    /  >  
 < ;   mimeMap     fileExtension  < span class =code-keyword> =  ttf    mimeType   =  application / x-font-truetype    /  >  
 <   mimeMap     fileExtension   =  woff    mimeType   =  application / font-woff    /  >  
 <   mimeMap     fileExtension   =  woff2    mimeType   =  application / font-woff2    /  >  
 <  < span class =code-leadattribute> / staticContent  >  
 <   / system.webServer   >  
 <   / configuration  >


Hi everybody,

I am using asp.net mvc 5 applicatie

I try to load a font at the server side, I am using the font: TrendSans-Five.

I have a main css - Site.css like this: 

@font-face
{
font-family: TrendSans-Five;
src: url('../fonts/TrendSans-Five.otf');
src: url('../fonts/TrendSans-Five.otf') format('embedded-opentype');
src: url('../fonts/TrendSans-Five.eot');
src: url('../fonts/TrendSans-Five.woff');
src: url('../fonts/TrendSans-Five.ttf') format('truetype');
/*src: local(TrendSans-Five), url(../fonts/TrendSans-Five.otf) format('opentype');*/
}



And in the webconfig I declare it like this:

<staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="font/truetype" />
      <remove fileExtension=".otf" />
      <mimeMap fileExtension=".otf" mimeType="font/opentype" />
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    </staticContent>




Local it is working correct - seeing the correct font

The site is: http://www.lolacyclingclub.org/[^]

And I have the font in the Font folder as: TrendSans-Five.otf.

So how to fix this , that you can see the correct font on the server?

Thank you all

解决方案

There are a couple of errors in your CSS.

First, you have a stray \9 in one of your CSS files, which causes the minification to fail:

/* Minification failed. Returning unminified contents.
(2815,5): run-time error CSS1035: Expected colon, found '}'
 */
...
    .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
        position: absolute;
        margin-left: -20px;
        margin-top: 4px; \9
    }



Second, you've defined a font-family called TrendSans-Five, but you've told the body and headings to use a font-family called Trend Sans Five. The family names need to be exactly the same.

body {
    font-family:"Trend Sans Five";
    font-size: 10px;
    line-height: 1.42857143;
    /*color: #888888;*/
    background-color: #060606;
}
...
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Trend Sans Five";
    font-weight: 500;
    line-height: 1.1;
    color: #ffffff;
}
...
@font-face
{
font-family: TrendSans-Five;
src: url('../fonts/TrendSans-Five.otf');
src: url('../fonts/TrendSans-Five.otf') format('embedded-opentype');
src: url('../fonts/TrendSans-Five.eot');
src: url('../fonts/TrendSans-Five.woff');
src: url('../fonts/TrendSans-Five.ttf') format('truetype'); 
/*src: local(TrendSans-Five), url(../fonts/TrendSans-Five.otf) format('opentype');*/
}



EDIT: The font mime-types that work for me are:

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="svg" mimeType="image/svg+xml" />
            <mimeMap fileExtension="eot" mimeType="application/vnd.ms-fontobject" />
            <mimeMap fileExtension="otf" mimeType="application/x-font-opentype" />
            <mimeMap fileExtension="ttf" mimeType="application/x-font-truetype" />
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
            <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
        </staticContent>
    </system.webServer>
</configuration>


这篇关于在服务器上加载字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆