iconos de fuente y scss estilo uni-app

iconos de fuente y scss estilo uni-app

• Nota: los selectores en uni-app tienen id, clase, etiquetas, etc., pero no hay un selector *
• La etiqueta de la página es similar al cuerpo.

rpx estilo uni-aplicación

• rpx es sensible px,
  • Una unidad dinámica que se adapta al ancho de la pantalla. Basado en una pantalla de 750 de ancho, 750rpx es exactamente el ancho de la pantalla. Cuando la pantalla se ensancha, el efecto de visualización real de rpx se ampliará proporcionalmente, pero cuando el ancho de la pantalla de la aplicación (vue2 no contiene nvue) y el lado H5 (vue2) alcance los 960 px, el valor predeterminado se calculará de acuerdo con la pantalla. ancho de 375px.

<template>
	<view>
	<view class="box1">
		我是box1
	</view>
	<view class="box2">
		我是box2
	</view>
	</view>
</template>

<style>
	.box1 {
    
    
		width: 750rpx;
		height: 750rpx;
		background: pink;
	}
	.box2 {
    
    
		width: 375rpx;
		height: 375rpx;
		background: yellow;
		font-size: 30rpx;
	}
</style>

• Efecto
  

Importar hojas de estilo de contorno

base.css

.box3 {
    
     
	width: 200rpx;
	height: 200rpx;
	background: #007AFF;
}

detalle.vue

<template>
	<view>
	<view class="box3">
		我是box3
	</view>
	</view>
</template>

<style>
	@import url("./css/base.css");
</style>

• Efecto
  

icono de fuente uni-aplicación

• Los íconos de fuentes se usan en uni-app de la misma manera que los proyectos web ordinarios, con los siguientes puntos de atención
• ten cuidado:
  • El tamaño del archivo de fuente es inferior a 40 kb, la aplicación uni se convertirá automáticamente a base64
  • El tamaño del archivo de fuente es igual o igual a 40kb, que debe ser convertido por el desarrollador, de lo contrario, el uso no tendrá efecto.
  • La ruta de referencia del archivo de fuente, se recomienda usar una ruta absoluta que comience con ~@

icono de fuente de descarga

• icono sitio web oficial
• Entre los iconos de fuente seleccionados, seleccione Descargar
• El efecto después de la descompresión.
  

Copie la biblioteca de fuentes correspondiente en el directorio de archivos de fuentes en el archivo estático

• Las cosas directamente en el archivo estático/fuente son:
  • iconfont.css
  • iconfont.ttf
  • iconofont.woff
  • iconfont.woff2
  • documentos relacionados
• ten cuidado:
  • Es la ruta del icono de la fuente que necesita ser modificada.En el iconfont.cssarchivo
  • Originalmentesrc: url('iconfont.woff2?t=1649157888662') format('woff2'),
  • Ahora, se cambia a:src: url('~@/static/font/iconfont.woff2?t=1649157888662') format('woff2'),

@font-face {
    
    
  font-family: "iconfont"; /* Project id 2160051 */
  src: url('~@/static/font/iconfont.woff2?t=1649157888662') format('woff2'),
       url('~@/static/font/iconfont.woff?t=1649157888662') format('woff'),
       url('~@/static/font/iconfont.ttf?t=1649157888662') format('truetype');
}

Usar en la aplicación, cargar global

<style>
	/*每个页面公共css */
	@import url("./static/font/iconfont.css");
</style>

Usar iconos de fuentes

• Nota: Por lo general, los iconos de fuente descargados contienen el archivo index.html. Haga doble clic en el archivo index.html para ver el icono de fuente correspondiente en el navegador.
  

<view class="iconfont icon-fanhui"></view>

• Efecto
  

uni-app usa scss, etc.

• Descargue scss - desde herramientas, verifique la instalación del complemento - vaya al mercado de complementos para instalar (instale un nuevo complemento) -
• Enlaces de mercado de complementos
• Después de buscar, instalarlo
• Luego haga clic en Importar complemento usando hbuilder