załączona czcionka jakby miga co jakiś czas

0

Witam. Dołączyłem sobie do strony w css czcionkę OpenSans i co kilka sekund tekst tylko w jednym obszarze strony mi tak jakby miga - ustawiony mam "OpenSans" (regular), a to miganie to jakby "cieńszy", drobniejszy tekst się robił i za chwilę znowu normalny i tak w kółko. Kursorem nie muszę ruszać bo i tak się tak dzieje, w css nie mam zmiany czcionki nigdzie, dla całej strony mam jedną czcionkę ustawioną w elemencie body.
Problem jest tylko w jednej sekcji strony, w liście wyświetlanych przeze mnie filmów, na innych podstronach gdzie jest zwykły tekst, nie miga nic.

// css
@font-face {
  font-family: 'OpenSans Light';
  src: url('../fonts/OpenSans-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'OpenSans';
  src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'OpenSans Bold';
  src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'OpenSans Semibold';
  src: url('../fonts/OpenSans-Semibold.ttf') format('truetype');
}
body {
    margin: 0px;
    padding: 0px;
    font-family: 'OpenSans', Arial, Helvetica, sans-serif;
    font-size: 14px;
    background: #111;
    color: #fff;
}
.movies-list .item .image {
    width: 100%;
    height: 235px;
    overflow: hidden;
    position: relative;
}
.movies-list .item .image img {
    width: 100%;
    height: 100%;
}
.movies-list .item .image .wrapper {
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-size: 11px;
    line-height: 17px;
    color: #fff;
    display: none;
    padding: 8px 7px;
    max-height: 100%;
    width: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.8);
}
.movies-list .item .image:hover .wrapper,
.movies-list .item .image .wrapper:hover {
    display: block;
}
.movies-list .item .image a {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    color: #fff;
}
.movies-list .item .details {
    margin-top: 5px;
}
.movies-list .item .title {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
// html
<div class="movies-list">
    <?php if (!empty($movies)): ?>
        <?php foreach ($movies as $value): ?>
    <div class="item">
        <div class="image">
            <?php echo HTML::image($value['image']); ?>
            <div class="wrapper">
                <?php echo $value['description']; ?>
            </div>
            <?php echo HTML::anchor('#', ''); ?>
        </div>
        <div class="details">
            <div class="title" title="<?php echo $value['title']; ?>"><?php echo $value['title']; ?></div>
        </div>
    </div>
        <?php endforeach; ?>
    <?php else: ?>
        Brak filmów do wyświetlenia.
    <?php endif; ?>
</div>
0

Dokonujesz zapewne jakichś animacji na tym elemencie albo jego poprzednikach (rodzice i dalej aż do body). Domyślnie przeglądarka sobie cachuje rastrowy tekst (albo coś w tym rodzaju), żeby strona działała płynniej, ale gdy go animujesz - na bieżąco to przelicza i przez to tekst wydaje się być cieńszy właśnie.

Wyłączyć się tego chyba nie da.

Pewnym workaroundem może być ustawienie opacity: 0.9999 dla elementu który przechowuje tekst (staraj się to robić najgłębiej jak się da, bo stosowanie tego do nadrzędnych elementów zwiększy obciążenie przy rysowaniu strony). Wymusi to renderowanie fonta na bieżąco. Tekst będzie "cieńszy" cały czas.

0

dopiero później zauważyłem że dzieje się jednak tak samo z calym tekstem na stronie, nawet ze zwykłym tekstem na innej podstronie. Próbowałem innej czcionki, np. Roboto, próbowałem ustawiać font-weight ale również nie pomogło ;/

@dzek69 animacji żadnych nie robię właśnie, oprócz font-size w kilku elementach i właśnie font-family w body, nigdzie już nie używam własności font-*

0

Ten problem nie ma nic wspólnego z samym fontem, ani jakąkolwiek właściwością font-*.

Daj link do strony jeżeli moje rozwiązanie Ci nie pomogło.

0

przypomniało mi się, że kiedyś miałem ten sam problem - Firefox ma problem z czcionkami, chyba tylko z niektórymi rozszerzeniami, ale nawet załączenie czcionki z google przez link z rozszerzeniem .woff2 też nie pomogło - na Chromie wszystko okej jest... ehh

0

a na temat zaczniesz odpowiadać czy mam sobie darować próby pomagania ci?

0

Przepraszam @dzek69, mam to na lokalnym i nie chciało mi się wrzucać na jakieś darmowe hostingi - przenoszenie bazy.. Jednak zrezygnuję z dołączaniem czcionki i pozostanę przy tych standardowych. Dzięki za odzew

1 użytkowników online, w tym zalogowanych: 0, gości: 1