Question

我正在使用Ionic Framework构建移动应用。我的应用程序标题标题使用的是自定义字体，通过@font-face加载。

我在下面有三个标题示例。顶部是默认值，最后两个使用我的自定义字体。

Ionic Header example

默认情况下你可以看到（HELVETICA TITLE）一切都是垂直居中的。 Ionic使用行高技巧。

紫色的第二个标题是应用自定义字体，它显然偏离中心。

第三个是通过将标题包装在<span>并分割字体样式来完成的。

这是可接受的做法吗？我应该关注什么？有没有附加<span>的任何方法来完成垂直对齐？

＆＃13;

angular.module('app', ['ionic']);

＆＃13;

/* All in one, but not vertically aligned (SAD TITLE) */

.bar-royal .title {
  color: #fff;
  font-size: 16px;
  font-family: "Peak";
  text-transform: uppercase;
  font-weight: 700;
}



/* Separated, but right in the middle (HAPPY TITLE) */

.bar-positive .title {
  color: #fff;
  font-size: 16px;
}
.bar-positive .title span {
  font-family: "Peak";
  text-transform: uppercase;
  font-weight: 700;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <link href="http://up.cwhit.co/DC2z9d3AYj.css" rel="stylesheet"><!-- custom Peak font -->
  <link href="http://code.ionicframework.com/1.0.0-rc.5/css/ionic.min.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/1.0.0-rc.5/js/ionic.bundle.js"></script>
</head>

<body ng-app="app">
  <ion-pane>

    <ion-header-bar class="bar-calm">
      <h1 class="title">HELVETICA TITLE</h1>
    </ion-header-bar>

    <ion-header-bar class="bar-royal" style="margin-top:50px">
      <h1 class="title">CUSTOM SAD TITLE</h1>
    </ion-header-bar>

    <ion-header-bar class="bar-positive" style="margin-top:100px">
      <h1 class="title"><span>CUSTOM HAPPY TITLE</span></h1>
    </ion-header-bar>

  </ion-pane>
</body>

</html>

＆＃13;

关于这个垂直对齐<span>黑客的想法

0 个答案: