안드로이드 텍스트 가운데 - css, 글꼴,line-box에 대한 노트
본고는 주로 안드로이드 시스템에서 브라우저에서 작은 글자 번호의 중국어 퀴즈의 실현과 혼합할 때의 정렬 처리를 탐색한다.이 글은
지금까지 앞부분의 가장 간단한 텍스트 수직 가운데에 있는 방식은 바로 라인-height=height입니다. 브라우저는 자동으로 라인-height가 font-size보다 큰 부분을 텍스트 상하로 나누어 가운데에 있는 효과를 실현합니다.그러나 홈페이지에 중국어, 특히 10-12px의 작은 글자 번호의 중국어가 존재할 때 일부 안드로이드 기기에서 문자가 떠다니며 용기를 넘어서는 경우도 있다.이런 현상에 대해 인터넷상에서 여러 가지 해결 방안이 전해지고 있는데 예를 들면 tabel-cell법, flex법 등이 있다.그러나 이런 방법은 항상 효과가 없다. 원인은 이런 방법이 라인박스를 외부 용기에 비해 가운데에 두는 문제만 해결했기 때문이다. 라인-height:normal에 맞추어 문자가 라인박스 안에 있어야 문제를 해결할 수 있기 때문이다.다음은line-height:normal의 효력 발생 원리와 부작용 처리에 대해 연구하고자 한다.
신기한 안드로이드 글씨체
에서 말한 바와 같이 문자에서 작은 것부터 큰 것까지 세 개의 구역을 그릴 수 있는데 그것이 바로em-square,content-area,virtual-area이다.일반적인 상황에서 앞의 구역은 대체적으로 가운데와 뒤의 구역이고 문자 자체도 대체적으로 이 구역에 위치한다.따라서 어떤 라인-height를 사용하든지 문자가 라인-box에 중심을 두는 것은 당연한 일이다.그러나 일부 안드로이드 시스템의 기본 글씨체에는 그렇지 않다.
다음 그림의 두 글자의 font-size와 Height는 모두 10px이고 왼쪽의 하나의line-height는 1이면 font-size와 같고 오른쪽의 하나는normal이다(DPR의 원인으로 인해 여기서 보이는 화소점은 실제의 3배이다).line-height 속성이 다르기 때문입니다.왼쪽의 line-box 크기는 ex-square, 오른쪽의 line-box 크기는virtual-area=content-area+line-gap 아래 그림의 왼쪽 빨간 상자 안의 옅은 회색 구역은em-square, 높이 10px, 짙은 회색 구역은content-area 높이 11px, 오른쪽 빨간 상자 안의 옅은 회색 구역은virtual-area 높이 14px이다.이를 통해 알 수 있듯이 이때em-square는content-area의 밑부분에 위치하고 자형은 content-area의 꼭대기에 위치하기 때문에 자형은 ex-square에 중심을 두지 않았다.오른쪽의 행동은 에서 말한 바와 달리virtual-area가 content-area에 비해 많이 나온 3px 크기의line-gap은 평균 분배와 상하가 아니라 모두 위에 쌓여 있다.그래서 마침 문자가virtual-area에 중심을 두고 있는 것처럼 보인다.
응용 프로그램
종합적으로line-height:normal은 문자를 이상한 안드로이드 기기에서 수직으로 가운데에 놓을 수 있다.물론 이 양식은 고도line-box의 높이를 제어할 수 없다는 문제를 가져올 수 있다. 이때 앞에서 말한 flex나 tabel-cell이 라인-box를 외부 용기에 비해 가운데로 놓고 외부 용기에 높이를 설정하면 된다.
다음은 실례를 사용하고 작용하는 스타일은 디스플레이: flex;align-items:center 두 개.신축성 용기를 만들고 이 용기의 하위 요소를 가운데로 두면 가상 아레아의 많은 부분이 테두리 밖으로 넘쳐나 레이아웃에 영향을 주지 않습니다.그림에서 빨간 상자 안의 옅은 회색 구역은 높이 12px의 용기이고 짙은 회색은 높이 16px의line-box와virtual-area이다.최종적으로 12px 크기의 문자를 12px 크기의 용기에 맞추는 목적을 실현하였다.
총결산
우리의 이전 방식을 되돌아보다.우리는 보통 라인-height에 구체적인 높이를 설정합니다. 이 높이가 라인-box의 높이입니다.브라우저는 글꼴의em-square를line-box에 가운데로 배치합니다.대부분의 정상적인 글씨체에 대해 이렇게 조작하면 수직 중심을 실현할 수 있다.그러나 일부 안드로이드 기계 글씨체의 자형은 em-square에 중심을 두지 않고virtual-area에 중심을 둔다.이때line-height:normal 스타일을 통해virtual-area가 line-box를 가득 채웁니다.이로써 line-box에 텍스트를 가운데로 두는 것을 실현한다.마지막으로 바깥쪽 용기의 크기를 고정시키고 가운데에 있는 라인박스를 통해 앞의 스타일로 인한 라인박스의 크기를 제어할 수 없는 부작용을 제거한다.
PS: 이 방안은 여러 줄 텍스트에 적용될 때 수동으로 줄 간격을 제어할 수 없고 글꼴 디자이너가 결정하는 기본 줄 간격만 사용할 수 있습니다.수동으로 줄 간격을 제어해야 할 때 이 방안을 포기하는 것을 권장합니다. 어쨌든 여러 줄 텍스트에 대해 1~2px의 편이도는 전체적인 시각적 표현에 큰 영향을 주지 않습니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
