Problem z czcionką Safari, tekst za gruby

Po zastosowaniu stylu font-weight:bold, wygląd czcionki jest zbyt duży w Safari w porównaniu z innymi przeglądarkami. Próbowałem poniżej css zgodnie z sugestią w niektórych witrynach, ale nadal jest taki sam.Problem z czcionką Safari, tekst za gruby

text-shadow: #000000 0 0 0px;

ekranu renderowania tekstu:

Chrome
enter image description here

Safari
enter image description here

Oto moja deklaracja css:

p { 

margin: 8px 5px 0 15px; 
color:#D8D2CE; 
font-size:11pt; 
letter-spacing:-1px; 
font-weight: bold; 
font-family: LektonRegular; 
} 

@font-face { 
font-family: 'LektonRegular'; 
src: url('myfonts/lekton-regular-webfont.eot'); 
src: url('myfonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfonts/lekton-regular-webfont.woff') format('woff'), 
    url(myfonts/lekton-regular-webfont.ttf) format('truetype'), 
    url('myfonts/lekton-regular-webfont.svg#LektonRegular') format('svg'); 
font-weight: normal; 
font-style: normal; 

}

Jak można to naprawić?

Źródło

2012-02-26 user1184100

kwestia ta jest obserwowana tylko w safari! – user1184100

Czy otrzymałeś rozwiązanie problemu? –

Do renderowania pogrubionego tekstu w różnych przeglądarkach, czcionka powinna jawnie zawierać pogrubione znaki. W przeciwnym razie przeglądarki prawdopodobnie próbują tworzyć odważne warianty znaków na podstawie ich normalnych wariantów, a wyniki są niespójne w różnych przeglądarkach, ponieważ prawdopodobnie mają różne algorytmy takiej konwersji.

Należy również pamiętać, że renderowanie tekstu mogą być różne na różnych platformach na poziomie systemu (na przykład Windows, Mac OS). Takie różnice są w porządku i zazwyczaj nie wymagają naprawy.

Zobacz także topic about -webkit-font-smoothing property.

Źródło

2012-02-26 09:10:59

To prawda, że niedostarczenie odmiany czcionek niestandardowych zmusi przeglądarkę do wygenerowania "pogrubionej" czcionki pogrubionej, która może wyglądać nieco dziwne. Ale to nie rozwiąże problemu, że Safari domyślnie renderuje cały tekst o wiele grubszy niż inne przeglądarki - odpowiedź Pawła poniżej to naprawi. –

@OlaTuvesson Jest całkowicie OK, aby strony były renderowane z domyślnym renderingiem OS. To jest niepotrzebne, a nawet szkodliwe, aby być kontrolowanym przez programistę. Co więcej, właściwości fabryczne z prefiksem mogą zostać usunięte lub zmienione w przyszłości, a zatem rozwiązania na ich podstawie nie są przyszłościowe. –

Naprawdę nie zgadzam się; większość moich klientów bardzo zależy na utrzymaniu tożsamości marki na wszystkich platformach (w miarę możliwości) - i tak, to obejmuje czcionki i ich wagę. Co więcej, nadmierne pogrubienie w Safari powoduje, że tekst jest trudniejszy do odczytania i ogólnie wygląda dość banalnie. –

Zastosowanie -webkit-font-smoothing: antialiased;

Tekst-shadow trik już nie działa.

Źródło

2012-02-26 05:09:30

dzięki Paul! .. próbował powyższych css, ale nie może znaleźć żadnej różnicy: – user1184100

To całkowicie działa na moim doświadczeniu. Milion podziękowań i tysiąc pochwał dla ciebie i twojego domu. –

pracował również dla mnie (na elemencie div, nie w @ font-face) – Kevin

Żadna z odpowiedzi tutaj nie zadziałała. Być może dlatego, że używam wersji Safari Safari do testowania. Musiałem dołączyć pogrubioną czcionkę do mojego CSS, aby naprawić problem. W przypadku pierwotnego pytania będzie musiał dodać następujące (zauważ, że używa tej samej nazwy font-family)

@font-face { 
font-family: 'LektonRegular'; 
src: url('myfonts/lekton-bold-webfont.eot'); 
src: url('myfonts/lekton-bold-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfonts/lekton-bold-webfont.woff') format('woff'), 
    url(myfonts/lekton-bold-webfont.ttf) format('truetype'), 
    url('myfonts/lekton-bold-webfont.svg#LektonRegular') format('svg'); 
font-weight: bold; 
font-style: normal; 
}

To działało we wszystkich przeglądarkach dla mnie.

Źródło

2014-10-22 19:55:25 nuander

W -webkit rozwiązania nie będą działać dla silnej emisji dla wielu czcionek Google, czcionek niestandardowych i czcionek, które nie mają wartości zaprogramowanych.

Problem polega na tym, że trzeba określić wartości pogrubione w silnych tagów.

Można to zrobić na dwa sposoby:

Można też zawierać od Google Fonts lub wszędzie tam, gdzie czcionka jest od w nagłówku; potrzebuje zarówno zwykłą czcionką oraz pogrubioną czcionką każdy powinien mieć inną liczbę font-weight jak 400 regularnych i 600 pogrubioną na przykład:

<link href="https://fonts.xxx.com/css?family=XXX:400,600" rel="stylesheet">

Albo użyć kodu źródłowego aboves i wklej do swojego CSS jak poniżej:

@font-face { 
    font-family: 'XXX'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('XXX SemiBold'), local('XXX-SemiBold'), 
    url... 
}

Użyj dowolnej czcionki zamiast XXX.

Wtedy również w silnym {font-weight:600;}

Źródło

2017-05-03 08:23:22 Beth

Problem z czcionką Safari, tekst za gruby

Odpowiedz

Powiązane problemy