ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸಲು ಎಮ್ಗಳನ್ನು ಬಳಸುವುದು
ನೀವು ವೆಬ್ ಪುಟವನ್ನು ನಿರ್ಮಿಸುತ್ತಿರುವಾಗ, ಹೆಚ್ಚಿನ ವೃತ್ತಿಪರರು ನೀವು ಎಮ್ಎಸ್, ಎಕ್ಸ್, ಶೇಕಡಾವಾರು ಅಥವಾ ಪಿಕ್ಸೆಲ್ಗಳಂತಹ ಅಳತೆಯ ಫಾಂಟ್ಗಳನ್ನು (ಮತ್ತು ವಾಸ್ತವವಾಗಿ ಎಲ್ಲವೂ) ಹೊಂದಿರುವಿರಿ ಎಂದು ಶಿಫಾರಸು ಮಾಡುತ್ತಾರೆ. ಯಾಕೆಂದರೆ ನಿಮ್ಮ ವಿಷಯವನ್ನು ಯಾರಾದರೂ ವೀಕ್ಷಿಸಬಹುದಾದ ವಿಭಿನ್ನ ಮಾರ್ಗಗಳಲ್ಲಿ ನಿಮಗೆ ನಿಜವಾಗಿಯೂ ಗೊತ್ತಿಲ್ಲ. ಮತ್ತು ನೀವು ಸಂಪೂರ್ಣ ಅಳತೆ (ಇಂಚುಗಳು, ಸೆಂಟಿಮೀಟರ್ಗಳು, ಮಿಲಿಮೀಟರ್ಗಳು, ಪಾಯಿಂಟ್ಗಳು ಅಥವಾ ಪಿಕಾಗಳು) ಬಳಸಿದರೆ ಅದು ವಿವಿಧ ಸಾಧನಗಳಲ್ಲಿ ಪುಟದ ಪ್ರದರ್ಶನ ಅಥವಾ ಓದುವ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು.
ಮತ್ತು ನೀವು ಗಾತ್ರಗಳಿಗಾಗಿ ಎಎಮ್ಗಳನ್ನು ಬಳಸಬೇಕೆಂದು W3C ಶಿಫಾರಸು ಮಾಡುತ್ತದೆ.
ಆದರೆ ಎಮ್ ಎಷ್ಟು ದೊಡ್ಡದಾಗಿದೆ?
W3C ಪ್ರಕಾರ ಎಮ್:
"ಇದು ಬಳಸಲ್ಪಡುವ ಅಂಶದ 'ಫಾಂಟ್ ಗಾತ್ರದ' ಆಸ್ತಿಯ ಗಣಿತ ಮೌಲ್ಯಕ್ಕೆ ಸಮಾನವಾಗಿರುತ್ತದೆ.ಎನ್ಫಾಲ್ಟ್ 'ಫಾಂಟ್ ಗಾತ್ರದ' ಆಸ್ತಿಯ ಮೌಲ್ಯದಲ್ಲಿ ಸಂಭವಿಸಿದಾಗ ಎಕ್ಸೆಪ್ಶನ್ ಆಗಿದ್ದರೆ, ಅದು ಸೂಚಿಸುತ್ತದೆ ಪೋಷಕ ಅಂಶದ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ. "
ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, EMS ಒಂದು ಪರಿಪೂರ್ಣ ಗಾತ್ರವನ್ನು ಹೊಂದಿಲ್ಲ. ಅವರು ಎಲ್ಲಿದ್ದರೂ ಅವುಗಳ ಗಾತ್ರದ ಮೌಲ್ಯಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತಾರೆ. ಹೆಚ್ಚಿನ ವೆಬ್ ವಿನ್ಯಾಸಕರಿಗೆ , ಅವರು ವೆಬ್ ಬ್ರೌಸರ್ನಲ್ಲಿದ್ದಾರೆ ಎಂದು ಅರ್ಥ, ಆದ್ದರಿಂದ 1em ಎತ್ತರದ ಫಾಂಟ್ ಆ ಬ್ರೌಸರ್ನ ಡೀಫಾಲ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರದ ಗಾತ್ರವನ್ನು ಹೊಂದಿದೆ.
ಆದರೆ ಡೀಫಾಲ್ಟ್ ಗಾತ್ರ ಎಷ್ಟು ಎತ್ತರವಾಗಿದೆ? ಗ್ರಾಹಕರು ತಮ್ಮ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ತಮ್ಮ ಡೀಫಾಲ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸಬಹುದಾದ್ದರಿಂದ, 100% ನಿಶ್ಚಿತ ಎಂದು ಯಾವುದೇ ಮಾರ್ಗಗಳಿಲ್ಲ, ಆದರೆ ಹೆಚ್ಚಿನ ಜನರು ಇದನ್ನು ಮಾಡದೆ ಹೆಚ್ಚಿನ ಬ್ರೌಸರ್ಗಳು 16px ನ ಡೀಫಾಲ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಹೊಂದಿರುತ್ತವೆ ಎಂದು ನೀವು ಊಹಿಸಬಹುದು. ಆದ್ದರಿಂದ ಹೆಚ್ಚಿನ ಸಮಯ 1em = 16px .
ಪಿಕ್ಸೆಲ್ಗಳಲ್ಲಿ ಯೋಚಿಸಿ, ಅಳತೆಗಾಗಿ ಎಮ್ಸ್ ಬಳಸಿ
ಡೀಫಾಲ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರವು 16 ಪಿಎಕ್ಸ್ ಎಂದು ನಿಮಗೆ ತಿಳಿದಿದ್ದರೆ, ನಂತರ ನಿಮ್ಮ ಗ್ರಾಹಕರನ್ನು ಸುಲಭವಾಗಿ ಮರುಗಾತ್ರಗೊಳಿಸಲು ಅವಕಾಶ ಮಾಡಿಕೊಡಲು ಎಎಂಗಳನ್ನು ಬಳಸಬಹುದು ಆದರೆ ನಿಮ್ಮ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕಾಗಿ ಪಿಕ್ಸೆಲ್ಗಳಲ್ಲಿ ಯೋಚಿಸಬಹುದು.
ಈ ರೀತಿಯ ಗಾತ್ರದ ರಚನೆಯನ್ನು ನಿಮಗೆ ಹೇಳಿ:
- ಹೆಡ್ಲೈನ್ 1 - 20 ಪ
- ಹೆಡ್ಲೈನ್ 2 - 18px
- ಹೆಡ್ಲೈನ್ 3 - 16px
- ಮುಖ್ಯ ಪಠ್ಯ - 14px
- ಉಪ ಪಠ್ಯ - 12 px
- ಅಡಿಟಿಪ್ಪಣಿಗಳು - 10px
ಅಳತೆಗಾಗಿ ಪಿಕ್ಸೆಲ್ಗಳನ್ನು ಬಳಸಿ ಆ ರೀತಿಯಲ್ಲಿ ಅವುಗಳನ್ನು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು, ಆದರೆ ನಂತರ ಐಇ 6 ಮತ್ತು 7 ಅನ್ನು ಬಳಸುವ ಯಾರಾದರೂ ನಿಮ್ಮ ಪುಟವನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಲು ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ. ಆದ್ದರಿಂದ ನೀವು ಗಾತ್ರವನ್ನು EMS ಗೆ ಪರಿವರ್ತಿಸಬೇಕು ಮತ್ತು ಇದು ಕೆಲವು ಗಣಿತದ ವಿಷಯವಾಗಿದೆ:
- ಹೆಡ್ಲೈನ್ 1 - 1.25 ಎಮ್ (16 x 1.25 = 20)
- ಹೆಡ್ಲೈನ್ 2 - 1.125 ಎಮ್ (16 × 1.125 = 18)
- ಹೆಡ್ಲೈನ್ 3 - 1em (1em = 16px)
- ಮುಖ್ಯ ಪಠ್ಯ - 0.875 ಎಮ್ (16 x 0.875 = 14)
- ಉಪ ಪಠ್ಯ - 0.75em (16 x 0.75 = 12)
- ಅಡಿಟಿಪ್ಪಣಿಗಳು - 0.625 ಎಮ್ (16 x 0.625 = 10)
ಉತ್ತರಾಧಿಕಾರವನ್ನು ಮರೆಯಬೇಡ!
ಆದರೆ ಇದು ಎಲ್ಲರಿಗೂ ಇಎಮ್ಎಸ್ ಇಲ್ಲ. ನೀವು ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕಾದ ಇನ್ನೊಂದು ಅಂಶವೆಂದರೆ ಅವರು ಪೋಷಕರ ಗಾತ್ರವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತಾರೆ. ಆದ್ದರಿಂದ ನೀವು ವಿಭಿನ್ನ ಫಾಂಟ್ ಗಾತ್ರದೊಂದಿಗೆ ಅಂಶಗಳನ್ನು ಸಂಯೋಜಿಸಿದರೆ, ನೀವು ನಿರೀಕ್ಷಿಸಿದಕ್ಕಿಂತ ಚಿಕ್ಕದಾದ ಅಥವಾ ದೊಡ್ಡದಾದ ಫಾಂಟ್ನೊಂದಿಗೆ ನೀವು ಅಂತ್ಯಗೊಳ್ಳಬಹುದು.
ಉದಾಹರಣೆಗೆ, ನಿಮಗೆ ಈ ರೀತಿಯ ಶೈಲಿ ಹಾಳೆ ಇರಬಹುದು:
p {font-size: 0.875em; }
.ಫೂಟ್ನೋಟ್ {ಫಾಂಟ್-ಗಾತ್ರ: 0.625em; }
ಮುಖ್ಯವಾಗಿ ಪಠ್ಯ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಗಳು ಕ್ರಮವಾಗಿ 14px ಮತ್ತು 10px ಎಂದು ಫಾಂಟ್ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಆದರೆ ನೀವು ಒಂದು ಪ್ಯಾರಾಗ್ರಾಟಿನಲ್ಲಿ ಅಡಿಟಿಪ್ಪಣಿ ಹಾಕಿದರೆ, ನೀವು 10px ಗಿಂತ 8.75px ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವಿರಿ. ಇದನ್ನು ನೀವೇ ಪ್ರಯತ್ನಿಸಿ, ಮೇಲಿನ ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಕೆಳಗಿನ HTML ಅನ್ನು ಡಾಕ್ಯುಮೆಂಟ್ಗೆ ಇರಿಸಿ:
ಈ ಫಾಂಟ್ 14px ಅಥವಾ 0.875 EMS ಎತ್ತರದಲ್ಲಿದೆ.
ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ನಲ್ಲಿ ಅಡಿಟಿಪ್ಪಣಿ ಇದೆ.
ಇದು ಕೇವಲ ಅಡಿಟಿಪ್ಪಣಿ ಪ್ಯಾರಾಗ್ರಾಫ್ ಆಗಿರುತ್ತದೆ.
ಅಡಿಟಿಪ್ಪಣಿ ಪಠ್ಯ 10px ನಲ್ಲಿ ಓದಲು ಕಷ್ಟ, ಇದು 8.75px ನಲ್ಲಿ ಅಸ್ಪಷ್ಟವಾಗಿರುತ್ತದೆ.
ಆದ್ದರಿಂದ, ನೀವು EMS ಅನ್ನು ಬಳಸುವಾಗ, ನೀವು ಪೋಷಕ ವಸ್ತುಗಳ ಗಾತ್ರಗಳ ಬಗ್ಗೆ ಬಹಳ ತಿಳಿದಿರಬೇಕಾಗುತ್ತದೆ ಅಥವಾ ನಿಮ್ಮ ಪುಟದಲ್ಲಿನ ಕೆಲವು ನಿಜವಾಗಿಯೂ ವಿಚಿತ್ರ ಗಾತ್ರದ ಅಂಶಗಳೊಂದಿಗೆ ನೀವು ಅಂತ್ಯಗೊಳ್ಳುತ್ತೀರಿ.