在Ionic Framework中开发应用程序时,我遇到了一个非常奇怪的问题。
我将@ font-face导入我的Ionic Framework应用程序,然后在Android设备(Galaxy SIII)上运行该应用程序。正如您所看到的那样,除了图像下方(以及初始屏幕上)外,所有字体(蒙特塞拉特)都会加载。它们在Web预览中加载很好。使用系统字体时,它们也可以正常加载(" Robot"在这种情况下)。我想知道它是否是由于字体没有被预先加载以便立即使用而且DOM渲染之前它会在这些特定元素上加载字体。
我已将背景设置为红色,并显示红色块,因此实际内容正在传送,但它看起来就像文本未呈现一样。文本是纯HTML格式。但我也通过一个表达式注入它,看看是否有任何影响。它没有。 ionic-icons的导入字体也可以完美运行。
这是我觉得最好的提示......如果我刷屏幕,瞧,文字神奇地出现了。在此之后的任何其他地方都不会再发生这种情况。
我包括我的CSS @ font-face,以防万一我错过了什么......
@font-face {
font-family: 'montserratregular';
src: url('montserrat-regular-webfont.eot#montserratregular');
src: url('montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('montserrat-regular-webfont.woff2#montserratregular') format('woff2'),
url('montserrat-regular-webfont.woff#montserratregular') format('woff'),
url('montserrat-regular-webfont.ttf#montserratregular') format('truetype'),
url('montserrat-regular-webfont.svg#montserratregular') format('svg');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'montserratregular', 'Helvetica Neue', 'Arial', sans-serif!important;
font-weight: normal !important;
}
...和相应的HTML
<div ng-click="testTime()" class="fullwidth-container start-test begin" ng-if="reactionFrame === 0">
<img src="img/touch.svg" class="tap-icon">
<h1 class="test-prompt">Tap to begin</h1>
<h3>Please follow the instructions on the next screen as quickly as possible.</h3>
</div>
有谁知道为什么会发生这种情况,如果有的话,解决方案会是什么?
答案 0 :(得分:0)
经过大量试验和错误后,我最终将问题追溯到默认Ionic样式表中包含的css。特别是这些样式(通过排除这个块,它解决了问题 - 但从未隔离到只有一种样式):
.content {
position: relative; }
.scroll-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
margin-top: -1px;
padding-top: 1px;
margin-bottom: -1px;
width: auto;
height: auto; }
.menu .scroll-content.scroll-content-false {
z-index: 11; }
.scroll-view {
position: relative;
display: block;
overflow: hidden;
margin-top: -1px; }
似乎滚动状态导致加载字体的延迟。我没有改变Ionic.css文件,而是分别通过实施<ion-content>
和<ion-pane>
来禁用<ion-content scroll="false">
和<ion-pane scroll="false">
。文本现在可以完美地加载。