Шрифт выглядит искаженным в окнах

Question

Iam делает сайт в ubuntu и заканчивается частью пользовательского интерфейса. Все работало гладко в ubuntu, но когда я переключился на окна, все шрифты искажены. Я пробовал следующий код

@font-face { 
    font-family: 'garrisonsb'; 
    src: url('../fonts/garrisons-bold.eot'); 
    src: url('../fonts/garrisons-bold.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/garrisons-bold.woff') format('woff'), 
     url('../fonts/garrisons-bold.ttf') format('truetype'), 
     url('../fonts/garrisons-bold.svg#garrison_sansbold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 

} 

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

} 

@font-face { 
    font-family: 'rupee'; 
    src: url('../fonts/Rupee.eot'); 
    src: url('../fonts/Rupee.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/Rupee.woff') format('woff'), 
     url('../fonts/Rupee.ttf') format('truetype'), 
     url('../fonts/Rupee.svg#rupeeregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

указанный код был сгенерирован с использованием белкового генератора. Я попробовал с параметром font-smooth, установленным как «always», а также с -webkit-font-smoothing, настроенным на сглаживание, и шрифт-вес также был указан как 700 для обычных и 900 для жирного, а не «нормального», но ничего не получилось.

пожалуйста, предложить оптимальное решение ......

Answer 1

Веб-шрифты не являются гладкими во всех браузерах. Возможно, вам придется использовать -webkit-font-smoothing: antialiased для веб-браузеров.

Лучше использовать text-shadow: 0px 0px 1px #GOOD-COLOR-HERE или text-shadow: 0px 0px 1px rgba(COLOR-SETTINGS-HERE) и настроить настройки цвета и тени для достижения наилучшего результата.

Answer 2

Говоря, что проблема остается во всех браузерах, возникает вопрос, что-то не так с вашим шрифтом или, может быть, с чем-то еще? Можете ли вы попытаться сделать это с другим шрифтом в Windows, чтобы увидеть результат?

Несмотря на то, что решение @Madhu Rox является довольно режущим краем.