Questions tagged «font-face»

有没有一种方法可以在网站上添加一些自定义字体而不使用图像，Flash或其他图形？ 例如，当我在一个婚礼网站上工作时，我发现了很多适合该主题的字体。但是我找不到在服务器上添加该字体的正确方法。以及如何在CSS中将该字体与CSS结合在一起？没有图形就可以做到吗？

518 html  css  fonts  font-face 

我正在寻找@ font-face CSS规则的MDC页面，但我一无所获。我分别使用粗体，斜体和粗体+斜体文件。如何将所有三个文件嵌入一条@font-face规则？例如，如果我有： @font-face { font-family: "DejaVu Sans"; src: url("./fonts/DejaVuSans.ttf") format("ttf"); } strong { font-family: "DejaVu Sans"; font-weight: bold; } 浏览器将不知道用于粗体显示的字体（因为该文件是DejaVuSansBold.ttf），因此它将默认为我可能不需要的字体。我如何才能告诉浏览器某种字体的所有不同变体？

454 fonts  css  font-face 

我正在一个需要在线进行字体测试的网站上，我拥有的字体都是.otf 有没有一种方法可以嵌入字体并使它们在所有浏览器上都能正常工作？ 如果没有，我还有什么其他选择？

440 html  css  fonts  font-face 

我在@font-face公司网站上使用，效果很好/看起来不错。除Firefox和Chrome以外，该.woff文件均会引发404错误。IE不会引发错误。我的字体位于根目录，但是我尝试使用css文件夹中的字体，甚至提供字体的整个URL。如果从我的css文件中删除那些字体，我不会得到404，所以我知道这不是语法错误。 另外，我使用了fontsquirrels工具来创建@font-face字体和代码： @font-face { font-family: 'LaurenCBrownRegular'; src: url('/laurencb-webfont.eot'); src: local('☺'), url('/laurencb-webfont.woff') format('woff'), url('/laurencb-webfont.ttf') format('truetype'), url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FontinSansRegular'; src: url('/fontin_sans_r_45b-webfont.eot'); src: local('☺'), url('/fontin_sans_r_45b-webfont.woff') format('woff'), url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg'); font-weight: normal; font-style: normal; }

422 css  http-status-code-404  font-face  woff 

我在Scss文件中配置了一些字体，如下所示： @font-face { font-family: 'Icomoon'; src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'), asset-url('icoMoon.woff', font) format('woff'), asset-url('icoMoon.ttf', font) format('truetype'), asset-url('icoMoon.svg#Icomoon', font) format('svg'); } 实际的字体文件存储在/ app / assets / fonts /中 我已添加config.assets.paths << Rails.root.join("app", "assets", "fonts")到我的application.rb文件 并且编译的CSS源代码如下： @font-face { font-family: 'Icomoon'; src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg"); } 但是，当我运行该应用程序时，找不到字体文件。日志： 在2012-06-05 23:21:17 +0100投放的资产/icoMoon.ttf-127.0.0.1开始获取“ …

345 ruby-on-rails  sass  asset-pipeline  font-face  assets 

在CSS3 font-face，有包括如多发性字体类型ttf，eot，woff，svg和cff。 我们为什么要使用所有这些类型？ 如果它们专用于不同的浏览器，为什么它们的数量大于主要Web浏览器的数量？

299 css  font-face  webfonts 

我注意到它info log开始出现在Google Chrome开发者版（版本55.0.2883.18开发）中，我无法想象为什么。 检测到慢速网络。：后备字体将同时加载使用的http：//font-path.extension ` 它会出现在所有使用的网站上font-face，甚至在本地页面和Chrome扩展程序上也是如此。

283 google-chrome  font-face 

我只想使用CSS创建一个关闭按钮。 我确定我不是第一个这样做的人，所以有人知道哪个字体的'x'宽度与高度相同，以便可以跨浏览器使用它看起来像关闭按钮吗？

219 css  fonts  font-face 

以下代码可在Google Chrome beta和IE 7中运行。但是，Firefox似乎对此有问题。我怀疑这是我的CSS文件如何包含的问题，因为我知道Firefox对跨域导入不太友好。 但这只是静态HTML，没有跨域问题。 在我的landing-page.html上，我像这样进行CSS导入： <link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" /> 在main.css中，我还有另一个导入，例如： @import url("reset.css"); @import url("style.css"); @import url("type.css"); 在type.css中，我有以下声明： @font-face { font-family: "DroidSerif Regular"; src: url("font/droidserif-regular-webfont.eot"); src: local("DroidSerif Regular"), url("font/droidserif-regular-webfont.woff") format("woff"), url("font/droidserif-regular-webfont.ttf") format("truetype"), url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "DroidSerif Bold"; src: url("font/droidserif-bold-webfont.eot"); src: …

194 css  firefox  font-face  file-uri 

我看到一些新网站在其网站上使用自定义字体（常规Arial，Tahoma等除外）。 并且它们支持大量的浏览器。 如何做到这一点？同时，如果可能的话，还会阻止人们自由下载字体。

174 css  font-face 

这是通常的SVG MIME类型： image/svg+xml 而且效果很好。但是，当嵌入SVG字体时，chrome会告诉您mime类型不正确，这显然是因为您返回的是字体而不是图像。 有通用的哑剧类型吗？铬不对吗？被application/svg+xml接受吗？ 我想这仍然是HTML5中的灰色区域，但是这里的人可能知道。

168 html  svg  font-face  mime-types 

Firefox存在一个长期存在的问题，即不加载与当前网页不同来源的字体。通常，在CDN上提供字体时会出现问题。 在其他问题上提出了各种解决方案： CSS @ font-face不适用于Firefox，但适用于Chrome和IE 随着Amazon S3 CORS的推出，是否存在使用CORS解决Firefox中字体加载问题的解决方案？ 编辑：非常高兴看到S3 CORS配置的样本。 edit2：我找到了一个可行的解决方案，但实际上并没有理解它的作用。如果任何人都可以提供有关配置的更详细的解释以及亚马逊解释配置时发生的背景魔术，那将不胜感激，就像nzifnab为其提供赏金一样。

134 css  firefox  amazon-s3  font-face  cors 

我是@font-face第一次使用，并从fontsquirrel下载了一个字体工具包 他们建议插入我的CSS中的代码是： @font-face { font-family: 'junctionregularRegular'; src: url('Junction-webfont.eot'); src: local('☺'), url('Junction-webfont.woff') format('woff'), url('Junction-webfont.ttf') format('truetype'), url('Junction-webfont.svg#webfontoNEpZXy2') format('svg'); } 现在，笑脸让我难过。但是src中的url数量也是如此-为什么它们建议这么多文件，并且在呈现页面时会将它们全部发送到浏览器？删除.ttf以外的所有内容是否有害？

133 css  font-face 

我正在构建一个小型Intranet应用程序，并且尝试使用最近购买的Adobe字体没有任何运气。据我了解，在我们的情况下，这不是违反许可证的行为。 我将.ttf / .otf字体版本转换为.woff，.eot和.svg，以便针对所有主要浏览器。我使用的@ font-face语法基本上是Font Spring的防弹语法： @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot'); src: url('myfont-webfont.eot?#iehack') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } 我修改了HTTP标头（添加了Access-Control-Allow-Origin =“ *”）以允许跨域引用。在FF和Chrome中，它可以完美运行，但是在IE9中，我得到： CSS3111: @font-face encountered unknown error. myfont-webfont.woff CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. myfont-webfont.ttf 我注意到将字体从.ttf / .otf转换为.woff时，我还得到了一个.afm文件，但是我不知道它是否重要... 任何想法如何解决？ [编辑]-我在IIS 7.5下托管我的网站（也有字体，但在单独的目录和子域中用于静态内容）

132 internet-explorer  css  internet-explorer-9  font-face 

我必须导入Klavika字体，并且已经收到多种形状和大小的字体： Klavika-Bold-Italic.otf Klavika-Bold.otf Klavika-Light-Italic.otf Klavika-Light.otf Klavika-Medium-Italic.otf Klavika-Medium.otf Klavika-Regular-Italic.otf Klavika-Regular.otf 现在我想知道是否有可能仅用一个将它们导入CSS @font-face -query，即weight在查询中定义的位置。我想避免将查询复制/粘贴8次。 所以像这样： @font-face { font-family: 'Klavika'; src: url(../fonts/Klavika-Regular.otf), weight:normal; src: url(../fonts/Klavika-Bold.otf), weight:bold; }

118 css  fonts  font-face