在 iPad/iPhone 上使用 CSS @font-face

发布于 2024-09-30 13:29:57 字数 665 浏览 2 评论 0原文

我正在尝试将 CSS 的 font-face 属性与自定义字体一起使用：

@font-face {
   font-family: "Handvetica";
   src: url("Handvetica.eot"); 
   src: url("Handvetica.ttf") format("truetype"),
     url("Handvetica.otf") format("opentype"), 
     url("Handvetica.woff") format("woff"),
     url("Handvetica.svg#Handvetica") format("svg");
}

它适用于 ff、safari 和 ff、safari 等。正确镀铬。

网络上的多个网站都指出，要在 iOs 设备 (iPod/iPhone/iPad) 上使用 font-face，需要 svg 字体。字体是使用 https://onlinefontconverter.com 转换的，我有所有格式。

svg 字体在 iO 上不显示。有谁知道如何让它发挥作用？另外，svg url 声明中 # 的正确语法是什么？它代表什么？

谢谢。

原文

I'm trying to use the font-face attribute of CSS with a custom font:

@font-face {
   font-family: "Handvetica";
   src: url("Handvetica.eot"); 
   src: url("Handvetica.ttf") format("truetype"),
     url("Handvetica.otf") format("opentype"), 
     url("Handvetica.woff") format("woff"),
     url("Handvetica.svg#Handvetica") format("svg");
}

it works on ff, safari & chrome properly.

multiple sites on the web state that to use font-face on iOs devices (iPod/iPhone/iPad) an svg font is required.
the fonts were converted using https://onlinefontconverter.com, and i have all of the formats.

the svg font doesn't show on iOs.
Does anyone know how to make it work?
Also, what is the right syntax for the # in the svg url declaration? what does it stand for?

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

终止放荡 2024-10-07 13:29:57

这是一个老问题，但我认为还没有人回答它，而且我之前也遇到过同样的问题。

SVG url 后面的 # 表示 SVG 字体的 ID，如果 # 后面的字符串与 SVG 字体的 ID 不匹配，则不起作用。如果打开 SVG 文件，您将看到如下标签：

<font id="webfontSRj8j0PE" horiz-adv-x="1058" >

This is for the BEBAS font, but if it is for your Handvetica font for example, you'd have type in url("Handvetica. svg#webfontSRj8j0P") 格式("svg")

This is an old question, but I figured nobody answered it yet and I was having the same problem earlier.

The # in after the SVG url denotes the SVG font's ID, and it's not going to work if the string after # doesn't match the SVG font's ID. If you open up the SVG file, you'll see a tag like this:

<font id="webfontSRj8j0PE" horiz-adv-x="1058" >

This is for the BEBAS font, but if it was for your Handvetica font for example, you'd have to type in url("Handvetica.svg#webfontSRj8j0P") format("svg")

回复收藏 0 原文

新雨望断虹 2024-10-07 13:29:57

它可能是您使用的转换器 - 或者可能是 iPad 缓存。
世界上最好的字体网站：

http://www.fontsquirrel.com/

生成正确的字体套件，为您提供一组字体 - 您可以向其发送您自己的字体（许可允许），它会为您构建一个字体套件。这包括 TTF、Woof、SVG、OTF。

压缩整个内容，CSS，字体，示例，然后下载。

一直为我工作。

回复收藏 0 原文

送舟行 2024-10-07 13:29:57

我正在使用 FontAwesome 并且遇到了同样的问题。问题是 .svg# 标识符与 .svg 文件中的实际内容不匹配。

在文件中，您将看到：

要使图标不显示为正方形，请更改字体中的这一行 - Awesome.css 文件

更改此行：

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
  url('../font/fontawesome-webfont.woff') format('woff'),
  url('../font/fontawesome-webfont.ttf') format('truetype'),
  url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

到此行

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
  url('../font/fontawesome-webfont.woff') format('woff'),
  url('../font/fontawesome-webfont.ttf') format('truetype'),
  url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

I was using FontAwesome and I had the same problem. The issue is that the .svg# identifier doesnt match what is actually in the .svg file.

In the file you'll see: <font id="FontAwesomeRegular" horiz-adv-x="1843" >

To get your icons to not appear as squares change this line in the font-awesome.css file

Changing this line:

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
  url('../font/fontawesome-webfont.woff') format('woff'),
  url('../font/fontawesome-webfont.ttf') format('truetype'),
  url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

to this line

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
  url('../font/fontawesome-webfont.woff') format('woff'),
  url('../font/fontawesome-webfont.ttf') format('truetype'),
  url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

回复收藏 0 原文

注定孤独终老 2024-10-07 13:29:57

可能是服务器。为了使 SVG 正常工作，有时需要设置 SVG mime 类型：

 image/svg+xml

Could be the server. For the SVG to work you sometimes need the SVG mime type set up:

 image/svg+xml

回复收藏 0 原文

听，心雨的声音 2024-10-07 13:29:57

此外，svg url 声明中 # 的正确语法是什么？
它代表什么？

它是对给定文件中特定或元素的引用。您可以在同一个 svg 文件中包含任意数量的 svg 字体/字体，尽管最常见的是只有一个。

回复收藏 0 原文

末蓝 2024-10-07 13:29:57

TransType 是一款转换字体格式的专用工具，还可以一键生成 @font 网络字体文件。与 fontsquirrel 不同，它适用于拉丁字体和非拉丁字体，例如阿拉伯字体。
http://www.fontlab.com/font-converter/transtype/
然而，使用这些@fonts的页面似乎可以在桌面浏览器和ipad ios8上运行，但不能在iphone ios8上运行

回复收藏 0 原文

~没有更多了~