Szerokość piksela w postaci jednobarwnej

Zastanawiam się, czy możliwe jest obliczenie szerokości piksela znaku w czcionce o stałej szerokości geograficznej? Używam czcionek o stałej szerokości, ponieważ potrzebuję, aby każdy znak zajmował tę samą szerokość w moim DIV, ale nie jestem pewny, jak w niezawodny sposób uzyskać rzeczywistą szerokość tego piksela. Muszę poprawić szerokość, aby wykonać obliczenia w JavaScript. Oto mój css:Szerokość piksela w postaci jednobarwnej

font-family: monospace; 
font-size: 15px;

Czy to możliwe?

Źródło

2013-03-22 TGH

Pamiętaj, że określanie konkretnej czcionki i rozmiaru nie oznacza, że moja przeglądarka będzie z niego korzystać. –

Czy próbowałeś używać czcionki o stałej szerokości z czcionek @include firmy Google? Myślę, że spowodowałoby to ten sam rozmiar czcionki dla wszystkich (wspierających) przeglądarek. Wciąż jednak musiałbyś to zmierzyć. – Leaf

Najlepszym sposobem na zrobienie tego jest utworzenie ekranu z odstępem (position: absolute; top: -100px;) z pojedynczym znakiem. Następnie możesz zmierzyć szerokość przęsła, aby uzyskać szerokość 1 znaku w czcionce o stałej szerokości. Upewnij się, że padding jest ustawiony na 0px na przęśle, ponieważ jest on zawarty w szerokości.

EDIT: Jeśli potrzebne jest tylko przybliżenie, jednostka ex jest często pomocne. 1ex to wysokość małej litery "x". Jest to często mniej więcej tyle samo co szerokość. Ale to nie jest dokładne.

Źródło

2013-03-22 15:53:45 jaypeagi

Technicznie właściwość 'offsetWidth' jest prawdopodobnie najlepszym ujęciem dla uzyskania szerokości elementu. Jednostka '1ex' nie ma zdefiniowanego związku z szerokością znaków; np. dla Courier New w rozmiarze 16px, szerokość znaków wynosi 10px, ale "1ex" to 7px. –

Nie jestem pewien, czy możliwe jest uzyskanie absolutnej pewności co do szerokości, a nawet wysokości litery, Monospace lub w inny sposób na wszystkich platformach. sufiks PX w rozmiarze czcionki nie odzwierciedla rzeczywistych pikseli na ekranie (więcej informacji można znaleźć na stronie here).

Podejrzewam, że jedynym sposobem byłoby użycie rozpiętości o ustalonej szerokości dla każdej postaci.

Ciekawe, jestem ciekawy, dlaczego potrzebujesz stałych liter. Czy możesz udostępnić JS Fiddle?

Źródło

2013-03-22 15:54:18 po228

Mam to zasadniczo działa przez przybliżenie szerokości, ale zastanawiałem się, czy jest sposób, aby to zrobić dokładnie – TGH

Szerokość piksela w postaci jednobarwnej

Odpowiedz

Powiązane problemy