wp_get_computed_fluid_typography_value

函数
wp_get_computed_fluid_typography_value ( $args = array() )
Access
Private
参数
  • (array) $args { Optional. An associative array of values to calculate a fluid formula for font size. Default is empty array. @type string $maximum_viewport_width Maximum size up to which type will have fluidity. @type string $minimum_viewport_width Minimum viewport size from which type will have fluidity. @type string $maximum_font_size Maximum font size for any clamp() calculation. @type string $minimum_font_size Minimum font size for any clamp() calculation. @type int $scale_factor A scale factor to determine how fast a font scales within boundaries. }
    Required:
    Default: array()
返回值
  • (string|null) A font-size value using clamp() on success, otherwise null.
定义位置
相关方法
wp_migrate_old_typography_shapewp_get_typography_value_and_unitwp_get_typography_font_size_valuewp_register_typography_supportrest_get_best_type_for_value
引入
6.1.0
弃用
-

wp_get_computed_fluid_typography_value: 这个函数根据用户的设置检索计算出的流体排版值。它将CSS属性名称作为参数,并返回计算的流体排版值: 这个函数是用来根据用户的设备屏幕尺寸和字体大小偏好来计算流体排版的值。

根据可用的最小/最大视口宽度和最小/最大字体大小,在内部实现CSS clamp()。

function wp_get_computed_fluid_typography_value( $args = array() ) {
	$maximum_viewport_width_raw = isset( $args['maximum_viewport_width'] ) ? $args['maximum_viewport_width'] : null;
	$minimum_viewport_width_raw = isset( $args['minimum_viewport_width'] ) ? $args['minimum_viewport_width'] : null;
	$maximum_font_size_raw      = isset( $args['maximum_font_size'] ) ? $args['maximum_font_size'] : null;
	$minimum_font_size_raw      = isset( $args['minimum_font_size'] ) ? $args['minimum_font_size'] : null;
	$scale_factor               = isset( $args['scale_factor'] ) ? $args['scale_factor'] : null;

	// Normalizes the minimum font size in order to use the value for calculations.
	$minimum_font_size = wp_get_typography_value_and_unit( $minimum_font_size_raw );

	/*
	 * We get a 'preferred' unit to keep units consistent when calculating,
	 * otherwise the result will not be accurate.
	 */
	$font_size_unit = isset( $minimum_font_size['unit'] ) ? $minimum_font_size['unit'] : 'rem';

	// Normalizes the maximum font size in order to use the value for calculations.
	$maximum_font_size = wp_get_typography_value_and_unit(
		$maximum_font_size_raw,
		array(
			'coerce_to' => $font_size_unit,
		)
	);

	// Checks for mandatory min and max sizes, and protects against unsupported units.
	if ( ! $maximum_font_size || ! $minimum_font_size ) {
		return null;
	}

	// Uses rem for accessible fluid target font scaling.
	$minimum_font_size_rem = wp_get_typography_value_and_unit(
		$minimum_font_size_raw,
		array(
			'coerce_to' => 'rem',
		)
	);

	// Viewport widths defined for fluid typography. Normalize units.
	$maximum_viewport_width = wp_get_typography_value_and_unit(
		$maximum_viewport_width_raw,
		array(
			'coerce_to' => $font_size_unit,
		)
	);
	$minimum_viewport_width = wp_get_typography_value_and_unit(
		$minimum_viewport_width_raw,
		array(
			'coerce_to' => $font_size_unit,
		)
	);

	/*
	 * Build CSS rule.
	 * Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
	 */
	$view_port_width_offset = round( $minimum_viewport_width['value'] / 100, 3 ) . $font_size_unit;
	$linear_factor          = 100 * ( ( $maximum_font_size['value'] - $minimum_font_size['value'] ) / ( $maximum_viewport_width['value'] - $minimum_viewport_width['value'] ) );
	$linear_factor_scaled   = round( $linear_factor * $scale_factor, 3 );
	$linear_factor_scaled   = empty( $linear_factor_scaled ) ? 1 : $linear_factor_scaled;
	$fluid_target_font_size = implode( '', $minimum_font_size_rem ) . " + ((1vw - $view_port_width_offset) * $linear_factor_scaled)";

	return "clamp($minimum_font_size_raw, $fluid_target_font_size, $maximum_font_size_raw)";
}

常见问题

FAQs
查看更多 >