相关疑难解决方法(0)
为不起作用的字体设置过期标头
我在.htaccess文件中使用以下代码尝试为某些字体设置过期标头,但在检查我的firefox缓存和过期标头后,字体设置为从现在开始大约12小时后到期; 不是我试图设置它的1年.
这是我的代码:
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
# Compress compressible fonts
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
# Add a far future Expires header for fonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
我究竟做错了什么？
推荐指数
解决办法
查看次数
截至2012年底实施@ font-face
我花了几个晚上调查用现代浏览器实现@ font-face的最佳方法.我是一名全职的网络/系统开发人员,具有作为平面设计师的背景,我发现网页设计的机会和可能性变得越来越有趣.所以,我做了一些测试,并想听听是否有人有任何建议,任何更好的想法或输入.我的测试场景看起来像这样.
我用ALOT测试了不同的在线工具和应用程序,但最后我把它归结为一个在线服务和一个应用程序.
- FontSquirrel,在线工具 - 免费.http://www.fontsquirrel.com/fontface/generator
- FontXChange,mac/win应用程序 - 99 $.http://fontgear.net/fontxchange.html
我使用了我的Mac,Tamil Sangam MN和Tamil Sangam MN Bold附带的字体,两者都是开放型,.otf.
- TamilSangamMN.otf - 290 KB
- TamilSangamMNBold.otf - 271 KB
调查转换大小
FontSquirrel
这是一个很好的在线工具,非常好.有几种不同的模式,我使用了Basic和Optimal.我的.otf文件的输出是svg,ttf,eot和woff.
基本
定期
- TamilSangamMN.svg 233 KB
- TamilSangamMN.ttf 71 KB
- TamilSangamMN.eot 25 KB
- TamilSangamMN.woff 30 KB
- 总计:359 KB
胆大
- TamilSangamMNbold.svg 225 KB
- TamilSangamMNbold.ttf 69 KB
- TamilSangamMNbold.eot 25 KB
- TamilSangamMNbold.woff 30 KB
- 总计:349 KB
最佳
我注意到最佳字体的第一件事是它们比基本变体小得多~260 KB!
定期
- TamilSangamMN.svg 33 KB
- TamilSangamMN.ttf 25 KB
- TamilSangamMN.eot 15 KB
- TamilSangamMN.woff 17 KB
- 总计:90 KB
胆大
- TamilSangamMNbold.svg …
推荐指数
解决办法
查看次数
如何解决闪烁的 Font Awesome 图标？
如果我使用到处推荐的东西 -每次在“页面加载时”闪烁时都使用“ Font Awesome ”的CDN 附件。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
Q 如何防止闪烁？
推荐指数
解决办法
查看次数
导入html字体及其样式变体？
我正在实现Roboto在我的网站中命名的谷歌字体.
我需要2种类型:bold和regular.
所以我检查了两种类型并按了下载按钮:
但在下载的rar文件中,我得到了所有字体样式(也是我没有选择的字体样式):
无论如何,我想测试常规字体:( 字体现在在我的网站,而不是从谷歌加载).
(我使用字体转换器(http://www.font2web.com/)获得了其他扩展类型(eot,woff,svg ))
所以我做了 :
<style type="text/css">
@font-face {
font-family: 'Roboto';
src: url('/font-face/Regular/Roboto-Regular.eot'); /* IE9 Compat Modes */
src: url('/font-face/Regular/Roboto-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/font-face/Regular/Roboto-Regular.woff') format('woff'), /* Modern Browsers */
url('/font-face/Regular/Roboto-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/font-face/Regular/Roboto-Regularo.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body { font-family: 'Roboto', sans-serif; }
</style>
题 :
假设我想将一种Roboto bold风格应用于div.
我应该这样做:
div {
font-family: 'Roboto', …推荐指数
解决办法
查看次数
html；使用 base64 加载自定义字体
我可以从服务器加载字体。但这不是正确的方法。如何加载 Base 64 字体？我用这个我的CSS文件
@font-face {<br>
font-family: 'MyFontFamily';<br>
src: url(data:font/ttf;charset=utf-8;base64,data_base64);<br>
}<br>
.t{<br>
font-family: "MyFontFamily";<br>
background-color: red;<br>
}
这是我的 html 页面
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style2.css">
<title>Document</title>
</head>
<body>
<p class = 't'>test</p>
</body>
</html>`
推荐指数
解决办法
查看次数
如何设置Mod字体过期
我想设置字体的有效期。以下定义无效apache 2.2.15。
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
推荐指数
解决办法
查看次数
自定义字体无法在Chrome/Safari中呈现
我正在使用CSS方法通过使用CSS类中的字体名称来从fonts.com渲染字体
.myFont h3 {
background-color: #FFFFFF;
color: #000000;
font-family: "ReformaGroteskW01-Mediu";
font-size: 40px;
font-weight: normal;
letter-spacing: 0.04em;
margin: 0 auto;
padding: 0 7px;
text-transform: uppercase;
width: 105px;
}
并使用fonts.com提供的链接标签链接字体,这适用于Firefox,但不适用于chome和Safari,似乎webkit浏览器没有链接到这里的东西,我会支持fonts.com但我有发现他们的支持在过去很慢.
<link type="text/css" rel="stylesheet" href="http://fast.fonts.com/cssapi/11386172-45ea-43f5-93bd-d795e60c00af.css">
推荐指数
解决办法
查看次数