Question

www.oihanevalbuenaredondo.be

我在font-family: adobe arabic的css中为我的帖子标题制作了一个字体，在我的窗口上，标题显示了它应该是怎样的，但是，当我在Mac上访问我的博客时，标题只是在一个无聊的基本字体中，它不是“阿拉伯语”＃。为什么safari不能在Adobe阿拉伯语中显示标题？

这是文件style.css：

.entry-title {
font-family: adobe arabic;
text-align: center;
letter-spacing: 1px;
color: #7f7f7f;
font-size: 28px;
position: relative;
margin: 0 0 10px 0;
padding: 0 60px;
}

.entry-title a:hover {
color: #d9d9d9;
}

而且，我还有另一个问题。如果您在Windows上看不到它，但我页面顶部的语言选项完全位于我的窗口上，但在Mac上，边框的位置和下拉列表都不均匀，其中一个更左边。

这是我对边境的css：

.topbar {
position: absolute;
right: 170px;
top:-8px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 11px;
padding-left: 10px;
z-index: 1000;}

这就是我为下拉列表所做的事情：

.widget_polylang {
position: absolute;
top: -330px;
width: 150px;
right: 20px;
z-index: 10001;}

此代码用于定位窗口小部件。因为下拉列表只能通过窗口小部件添加到我的博客中。所以我找到了小部件。

也许我在CSS中做错了，我不知道，我是HTML的初学者，这对我来说在Windows上工作得很好，但显然它不是正确的。

Answer 1

最有可能的原因是您没有在Mac上安装这些字体。对于网页，您需要使用@font-face规则定义字体。使用@font-face，您可以随网页一起提供字体，也可以使用提供的网址，浏览器可以使用它。

Answer 2

首先，您应该通过CSS为项目添加新字体。在这里你有想法如何正确地做到这一点：如何在网站上添加一些非标准字体？我建议阅读Javier Cadiz的答案，因为他建议使用.woff格式，这是我认为最好的解决方案。

Answer 3

首先，您需要嵌入字体，以便全世界了解它。

您可以通过实施@font-face：

来实现这一目标

@font-face {
    font-family: myFont;
    src: url(path/to/your/font.ttf);
    font-weight: bold;
}
p{font-family: myFont}

或者你可以在CSS3中使用import方法。

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Barrio');
p{
  font-family: 'Barrio', cursive;
}

＆＃13;

<p>hello</p>

＆＃13;

如您所见，我们现在可以看到我们的自定义字体，即使没有人安装它。

<小时/> 您正在谈论的另一个问题是OSX和WIN之间的文本略有错位对齐可能与两个操作系统之间的字体渲染引擎的差异有关。你可以阅读here。遗憾的是，你无法真正做到这一点。

渲染引擎是不同操作系统如何解释和显示字体的机制。因此，一旦你正确加载两种字体，你会发现一些小的间距和尺寸差异。

Mac上的字体和div位置不同（wordpress）

3 个答案: