Każdy ma jakiś pomysł, jak obliczyć odstępy między literami w Photoshopie w css px lub rem. Przykład: Mam 140 odstępów między literami w programie Photoshop. Co powinno być na CSS? Czy jest jakiś sposób, aby to zrobić z sass?Jak obliczyć odstępy między wierszami programu Photoshop w css px lub rem?
Dzielenie wartości w Photoshopie przez 1000 i ustawienie, które daje em daje doskonałe wyniki w pikselach.
Na przykład, powiedzmy, że w Photoshopie masz odstęp między literami równy 50, wynikowe css to letter-spacing: 0.05em.
Tworzenie prostych funkcji, które pomogą Ci zrobić spędzaj matematyczne:
@function letter-spacing($ps-value) {
@return ($ps-value/1000) * 1em
}
może masz rację, a także wypróbowałem twój kod, ale tak blisko, jak stwierdziłem, że nie jest on dokładny. Jak wizualnie w Photoshopie. Ale przez cały czas dzięki za wysiłek. –
@HardenRahul to nie jest dokładne, ale nie z powodu odpowiedzi Steve'a (jest całkowicie poprawne), ale z powodu różnic w renderowaniu czcionek między Photoshopem a przeglądarkami. – Flying
@flying oznacza, że odpowiedź nie jest w 100% dokładna, tak jak powinna być. –
Szczerze, ja zazwyczaj tylko przetestować piekło z niego, upewnij się, moi pojemnik-szerokości i font-size mecz projekt-comp/psd _exactly_ i zwróć szczególną uwagę na słowa, od których zaczynają się nowe linie. .01em jest dobrym miejscem do rozpoczęcia. – admcfajn
@admcfajn Zgadzam się z Tobą, ale pracujemy dla klienta i testują swoją stronę do px do px. W takim przypadku nie mam czasu na obliczanie ani eksperymentowanie za każdym razem. –
Inną techniką, której często używam do precyzyjnej pracy z front-endem, jest znalezienie procentu ... Powiedzmy, że masz rozmiar czcionki: 50 pikseli, odstępy między literami 3px. 3/50 = 0,06. Jakie jednostki używa twój psd? Pytasz, jak eksportować css z photoshopa? Szkic to o wiele lepszy program. To idzie o wiele szybciej, niż myślisz. Nie musisz sprawdzać każdego słowa, ile elementów ma psd? Dobry projekt powtarza się, więc prawdopodobnie możesz znaleźć linię podstawową dla każdego ze stylów i dopracować ją w razie potrzeby. Czy używasz prekompilatora? Rzucanie niektórymi funkcjami może pomóc. – admcfajn