BG Development


Страници: (4) [1] 2 3 ... последна »  ( Първото ново мнение ) Reply to this topicStart new topicStart Poll

> Различни букви на един шрифт под отделни браузъри
exwol
Публикувано на: 02-05-2019, 22:29
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 34
Регистриран на: 05.02.18



Привет, нямам никаква представа от web кодиране, пък и нямам никакви амбиции, но от време на време ме тресе чисто любителско желание и интерес. Сега тъкмо се сдобих с повод и седнах да се забавлявам по една страница, но срещам проблем, който се изразява в следното: Преди време бях дръпнал един един шрифт от Fontabric с free лиценз. Сега реших да го ползвам за таз страница, но под различните браузъри някои букви на шрифта са различни. Например под Chrome и Firefox са едни, а под Safari и IE други.

Конвертирах шрифта онлайн от .ttf и .otf в .woff, слагах го и в .ttf и .eot и па е така. Инсталирах го на Windows и във Фотошопа изглежда като под Safari и IE.

Прикачам картинка за по-нагледно, обърнете внимание в разликата при буквите д,в,т,л,г. При мобилните устройства и браузъри, ситуацията е същата. Някой може ли да каже на какво се дължи тази разлика и има ли начин шрифта да се показва абсолютно еднакво на всички браузъри?

Това мнение е било редактирано от exwol на 02-05-2019, 22:31

Прикачена картинка (Кликнете на картинката, за да я увеличите!)
Прикачена картинка
PM
Top
ici
Публикувано на: 02-05-2019, 22:44
Quote Post


Group Icon
Име: Ивайло Илчев ики
Група: VIP
Ранг: Почетен член

Мнения: 16214
Регистриран на: 06.06.04



Виж тук: https://fonts.google.com/?subset=cyrillic дали няма шрифт който да ти хареса повече. icon_idea.gif


--------------------
Reading undefined locations provides undefined data.
PMEmail PosterUsers Website
Top
exwol
Публикувано на: 02-05-2019, 23:11
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 34
Регистриран на: 05.02.18



ici, да има готини шрифтове там, гледах ги даже преди, слагах Roboto и Philosopher преди да питам, но ми се искаше да нещо по-различно. Този шрифт ме радва как се чертае под Chrome и FF и някои букви например са специфични. Чудех се на какво се дължи тази разлика при изобразяването.
PM
Top
ici
Публикувано на: 03-05-2019, 00:05
Quote Post


Group Icon
Име: Ивайло Илчев ики
Група: VIP
Ранг: Почетен член

Мнения: 16214
Регистриран на: 06.06.04



Направи тестова страница сложи я някъде и пусни линка тук. Да се правим на Нострадамус няма нужда.


--------------------
Reading undefined locations provides undefined data.
PMEmail PosterUsers Website
Top
exwol
Публикувано на: 03-05-2019, 01:54
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 34
Регистриран на: 05.02.18



QUOTE (ici @ 03-05-2019, 00:05)
Направи тестова страница сложи я някъде и пусни линка тук. Да се правим на Нострадамус няма нужда.

Ок, направих една тестова страница с този шрифт, както ми каза.

Ето линка: КЛИК

Слагам и линк към по-четим css ако трябва: КЛИК

Можех да сложа направо тази, върху която си работя, но исках да игнорирам всичко останало. Вижте как е под различните браузъри. Аз съм пробвал на Widows 7, Linux, Mac, телефон с Андроид 9.0, iPhone X и iPhone 6s. Под Chrome и Firefox на всички ОС където вървят се изобразява еднакво, както е на картинката, която прикачих горе (има я и в тест страницата). На Apple устройствата под Safari и на Windows под IE 11 е еднакво изобразяването, пак както на картинката, но някои букви просто са различни.

Това мнение е било редактирано от exwol на 03-05-2019, 02:13
PM
Top
exwol
Публикувано на: 03-05-2019, 03:24
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 34
Регистриран на: 05.02.18



Да кажа, че има развитие по темата и реших проблема сам с малко повечко ровене в Гугъл. Понеже съм пълен профан в тази област и нямах представа, че съществува font-feature-settings в css, което се оказва някаква опция за контрол върху разширените типографски характеристики на шрифтовете OpenType. Добавих следното към css и вече под всички браузъри шрифта изглежда еднакво. Благодаря на ici за диалога до тук.

CODE
font-feature-settings: "liga" 1;
-webkit-font-feature-settings: "liga" 1;


Сега кажете дали това е правилния начин или трябва нещо друго да се допълва?

Това мнение е било редактирано от exwol на 03-05-2019, 03:31
PM
Top
johnfound
Публикувано на: 03-05-2019, 09:08
Quote Post


Group Icon
Име:
Група: VIP
Ранг: Почетен член

Мнения: 7373
Регистриран на: 27.05.04



Въобще, казват, че вместо font-feature-settings: "liga" е по-добре да се използва "font-variant-ligatures";


--------------------
asm32 - Приложно програмиране на асемблер.
Tox: 48C0321ADDB2FE5F644BB5E3D58B0D58C35E5BCBC81D7CD333633FEDF1047914A534256478D9
PMEmail PosterUsers Website
Top
ici
Публикувано на: 03-05-2019, 09:22
Quote Post


Group Icon
Име: Ивайло Илчев ики
Група: VIP
Ранг: Почетен член

Мнения: 16214
Регистриран на: 06.06.04



Вместо да се подобряват нещата по уеднаквяването на броузерите, те продължават да се разпълзяват като мравки по горещ тиган. За облекчаването на ситуацията се използва https://modernizr.com/ и/или подходящи шаблони със със css и js: https://html5boilerplate.com/


--------------------
Reading undefined locations provides undefined data.
PMEmail PosterUsers Website
Top
exwol
Публикувано на: 03-05-2019, 10:09
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 34
Регистриран на: 05.02.18



johnfound, мда за жалост си прав, защото предварително реших, че проблем се решава както го описах, но сгреших. Това горното дадено от мен решава проблема само под IE и там е ок, но под Safari продължава да има разлика в шрифта, сега се добрах до Apple джаджа, за да го видя. Ще вдигна една виртуалка с macOS по-късно, за да ми е под ръка и да видя дали ще стане с посоченото решение от теб. Явно ще се налучква.

Междувременно на тестовата страница отгоре, където дадох линк, добавих един бутон, който променя css директно за тест с включени и изключени разните там опции в css-a, които ще добавям. Сега под IE както казах, като пусна font-feature-settings: "liga" 1; и се оправя, но на Safari не. Продължавам да ровя по твоето предложение, благодаря!


ici, ще разгледам линковете, изглежда полезно, мерси. Инак прав си за браузърите, така изглежда, че всеки си тегли неговата връзка и става зъл възел, а съчетан с моето пълно неразбиране на материята ми е меко казано тъмница. Но ще го мъча, че ми е интересно да се намери най-оптималното работещо решение за тази конкретна ситуация.
PM
Top
flame
Публикувано на: 03-05-2019, 11:19
Quote Post



Име:
Група: Потребител
Ранг: Старо куче

Мнения: 754
Регистриран на: 27.08.04



IE/Safari рендват правилно шрифта. Според мен останалите рендват алтернатива инсталирана на твоята локална машина.

Също може да ползваш този метод за най-добра съвместимост.

CODE
@font-face {
 font-family: "UniNeue";
 src: url("UniNeue-Light-Cyr.eot");
 src: url("UniNeue-Light-Cyr.eot?#iefix") format("embedded-opentype"), url("UniNeue-Light-Cyr.woff2") format("woff2"), url("UniNeue-Light-Cyr.woff") format("woff");
 font-style: normal;
 font-weight: 400;
 font-stretch: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}


Прикачена картинка
Прикачена картинка


--------------------
be good
PM
Top
1 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента:

Topic Options Страници: (4) [1] 2 3 ... последна » Reply to this topicStart new topicStart Poll

 


Copyright © 2003-2019 | BG Development | All Rights Reserved
RSS 2.0