@ Ionic Framework中的font-face加載問題Android build

在Ionic Framework中開發應用程序時遇到了一個非常奇怪的問題。@ Ionic Framework中的font-face加載問題Android build

我進口@字體面到我的離子Framework應用程序，然後運行在Android設備（銀河SIII）上的應用程序。正如你可以看到字體（蒙特塞拉特）加載到除圖像下方（和初始屏幕上）以外的任何地方。它們在網頁預覽中加載得很好。使用系統字體時，它們也可以很好地加載（在這種情況下爲「Robot」）。我想知道這是否由於預先加載的字體不能立即使用，並且DOM在它將字體加載到這些特定元素之前呈現。

我已將背景設置爲紅色，並且出現紅色塊，因此實際內容正在傳遞，但它看起來像文本沒有呈現。該文本是純HTML格式。但我也通過表達式注入它，看看是否有任何效果。它沒有。離子圖標的導入字體也完美無瑕。

這是我覺得是最好的提示...如果我滑動屏幕，瞧，文本奇蹟般地出現。在此之後的其他地方不會再發生。

我包括我的CSS @字體面，以防萬一我失去了一些東西......

@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>

有誰知道爲什麼這可能會發生，如果是這樣，解決方案將是什麼？

來源

2015-08-19 Jeff Callahan

你可以請你的代碼在github或codepen或小提琴來看看 –

@Anilkumar，對不起，我錯過了這一點，但我結束了弄清楚是什麼導致了這個問題，雖然我不知道爲什麼它確實是一個問題。更多在我的答案下面。 –

嗯好吧，如果有可能，請將您的代碼上傳到github或codepen中，這樣我就可以找出isssue @Jeff Callahan –

經過大量的試驗和錯誤，我最終將問題追溯回默認離子樣式表中包含的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; }

看起來好像滾動狀態造成的字體的延遲加載。我通過分別實現<ion-content scroll="false">和<ion-pane scroll="false">，而不是更改Ionic.css文件，而是禁用了滾動條<ion-content>和<ion-pane>。文本現在加載完美，因爲它應該。

來源

2015-08-21 03:53:51

@ Ionic Framework中的font-face加載問題Android build

回答

相關問題