相关疑难解决方法(0)

使用具有多种样式的@font-face

来自 Google 网络字体的 Droid Serif 字体具有以下样式:

DroidSerif.ttf
DroidSerif-Bold.ttf
DroidSerif-BoldItalic.ttf
DroidSerif-Italic.ttf
Run Code Online (Sandbox Code Playgroud)

我想使用@font-faceCSS 声明在“Droid Serif”下导入所有这些样式,font-family并使用该font-weight属性来指定我是否想要粗体和/或斜体,而不必在不同的情况下分别导入它们font-family

@font-face {
    font-family: 'Droid Serif';
    src: url('../fonts/DroidSerif.ttf');
}

@font-face {
    font-family: 'Droid Serif Bold';
    src: url('../fonts/DroidSerif-Bold.ttf');
}

@font-face {
    font-family: 'Droid Serif BoldItalic';
    src: url('../fonts/DroidSerif-BoldItalic.ttf');
}

@font-face {
    font-family: 'Droid Serif Italic';
    src: url('../fonts/DroidSerif-Italic.ttf');
}
Run Code Online (Sandbox Code Playgroud)

这可能吗?

PS我已经尝试了每种谷歌网络字体的导入技术,但它们都不适用于IE 9。

html css fonts

5
推荐指数
1
解决办法
6033
查看次数

Google网络字体在IE9上无法正常显示

我正在使用Google Web Fonts.除IE9外,所有浏览器都正确呈现字体.(我没有在早期版本的IE上测试过).

区别在于:IE 9谷歌Chrome

HTML:

<head>
        <link href='http://fonts.googleapis.com/css?family=Yeseva+One' rel='stylesheet' type='text/css'>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
Run Code Online (Sandbox Code Playgroud)

Google字体文件内容:

@font-face {
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  src: local('Yeseva One'), 
       local('YesevaOne'), 
       url(http://themes.googleusercontent.com/static/fonts/yesevaone/v6/wVgDKaRrT3DN9VGcOY4orxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
Run Code Online (Sandbox Code Playgroud)

CSS:

.sf-menu li {
    float:left;
    position:relative;
    text-align:center;
    font-family:'Yeseva One',cursive;
    font-size:17px;
    line-height: 64px;
    border-bottom:1px solid #4A4A4A;
}
Run Code Online (Sandbox Code Playgroud)

我该怎么办?

css google-webfonts internet-explorer-9

5
推荐指数
1
解决办法
1万
查看次数

自定义Web字体在IE9中不起作用

我下载了自定义字体(Gotham-Light.eot),但它在Internet Explorer 9上不起作用.

@font-face {
    font-family: Gotham-Light;
    src: url('Gotham-Light.eot');
}
Run Code Online (Sandbox Code Playgroud)

这不起作用.我正在使用ASP MVC3重建,使用自定义工具,仍然没有.

css asp.net webfonts internet-explorer-9 asp.net-mvc-3

3
推荐指数
1
解决办法
9984
查看次数

@ font-face不能与Mozilla Firefox一起使用?

所以,我已经尝试了一切让@ font-face在Mozilla Firefox 3.6中运行.问题是我很确定这是因为我想在我的Tumblr博客上使用@ font-face,所以我在Tumblr上传器上传字体.

@font-face {
font-family: feel_scriptregular;
src: url(http://static.tumblr.com/3fk4soa/zKcm8o1y2/feel_script.otf);
src: url(http://static.tumblr.com/3fk4soa/IyZm8o1sa/feel_script-webfont.eot?#iefix) format(embedded-opentype),
     url(http://static.tumblr.com/3fk4soa/wgFm8o1tk/feel_script-webfont.woff) format(woff),
     url(http://static.tumblr.com/3fk4soa/wlLm8o1us/feel_script-webfont.ttf) format(truetype),
     url(http://static.tumblr.com/3fk4soa/tofm8o1vl/feel_script-webfont.svg#feel_scriptregular) format(svg);
}
Run Code Online (Sandbox Code Playgroud)

它不适用于双引号("),或单引号(')或没有任何,我不知道该怎么办..:/

css font-face

0
推荐指数
1
解决办法
2955
查看次数